什么是scss?什么是css预处理器?sass和scss的区别。
scss是一种css预处理语言。
定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。
常见的css预处理语言有SCSS (SASS) 和LESS、POSTCSS
那么SCSS和SASS 有什么区别呢
· 文件扩展名不同,文件后缀分别是“.scss”和“.sass”
· sass是以严格缩进语法规则来编写代码的,不包括大括号和分号,而scss的语法和css书写语法类似;sass的安装和使用不细说了;
· scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,是一种Scss-like语言,弥补了sass和css之间的差距
vue项目上安装SCSS和使用
① 使用vue-cli模板创建新项目:vue init webpack myvue
② 安装sass 依赖包 ,在cmd界面输入:
npm install sass-loader --save-dev
npm install node-sass --sava-dev
③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: / \.scss$ / ,
loaders: [ 'style' , 'css' , 'sass' ]
}
④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法,否则报错
CSS 的使用语法
-
注释
1.//注释内容 2./*注释内容*/ 3./*!注释内容*/
1.//注释内容
在Sass中,这种注释方式在编译后不会保留下来。
2./*注释内容*/
在Sass中,这种注释方式在编译之后会保留下来。因为这种注释方式跟CSS注释方式是相同的,所以编译后会保留下来。
3./*!注释内容*/
我们都知道压缩工具会删除所有的注释,有些时候为了保留一些版权声明的注释说明,可以采用这个方式注释声明。
- 导入外部文件
< style lang = "scss" > @import './test.scss' ; //导入外部scss文件 .myText { border : 1px solid red ; } </ style >
- 变量
- 全局变量
$height : 200px ; //全局变量声明不在大花括号内 $bgcolor : blue ; body { .father01 { //嵌套 width : $width ; height : $height ; $border : 1px solid red ; //局部变量是声明在元素内的 border : $border ; $bgcolor : purple ; //全局变量和局部变量名一致时,调用局部变量进行覆盖 background-color : $bgcolor ; } }
- 局部变量
body { .father01 { width : 200px ; height : 200px ; $border : 1px solid red !global; //使用global关键词将$border变为了全局变量 border : $border ; } .father02 { width : 300px ; height : 300px ; border : $border ; //使用全局变量 } }
- 默认变量
$color : red !default ; //声明默认变量 $color $color : purple ; //根据需求覆盖默认变量 .father01 { color : $color ; }
- 全局变量
- 变量嵌套引用 即字符串插值,需要使用 #{} 来进行包裹
$left : left ; .father02 { width : 300px ; height : 300px ; border : $border ; //使用全局变量 border- #{$left} : 2px solid purple ; //使用字符串插值之前必须先声明 }
- 嵌套
- 除了选择器嵌套外,还可以使用&来引用父元素
.container { & > p { //可以编译成CSS的 .container>p {} 效果 color : purple ; } }
- 除了选择器嵌套外,还可以使用&来引用父元素
- 继承
.container { color : purple ; border : 2px dashed purple ; } .myText { @extend .container; //这里将继承.container类的所有样式 font-size : 22px ; }
- 占位符
使用% 声明的代码块,如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起,代码变得十分简洁。%m5 { background-color : lightblue ;} .P1 { @extend %m5 ; }
- 混入 使用混合@mixin命令定义,以及使用@include调用该mixin
@mixin normalStyle { //使用@mixin命令定义可重复使用的代码块 width : 300px ; height : 100px ; color : black ; background-color : lightblue ; } .container { @include normalStyle ; //使用@include 命令引用@mixin定义的代码块 }
在使用@mixin和@include时,还可以传入参数和默认值
@mixin normalStyle ( $width , $height , $color , $defaultValue : orange ) { width : $width ; height : $height ; color : $color ; background-color : $defaultValue ; } .container { @include normalStyle ( 300px , 100px , green , lightgray ); }
- 条件语句
.container { p { @if 1 + 1 < 3 { border : 1px solid blue ; } @else { border : 1 ps dashed palevioletred ; } } }
- 函数
@function double ( $sn ){ //SCSS允许自定义函数 @return $sn * 2 ; } .myText { border : 1px solid red ; width : double ( 200px ); //使用在SCSS中自定义的函数 }
- 循环
1.for循环
在sass中的@for循环有两种方式:
①@for $i from <start> through <end>
②@for $i from <start> to <end>
其中$i表示变量,start表示开始值,end表示结束值;
through表示包括end这个数值;to表示不包括end这个数值;
2.while循环
只要@while后面的条件为true就会执行,直到表达式值为false时停止循环;
3.each in循环
就是去遍历一个列表,从列表中取出对应值;他的指令形式为:@each $var in <list>
/for 循环
@for $i from 1 to 5 {
.item- #{$i} {
border : #{$i} px solid ;
}
}
//while 循环
$m : 8 ;
@while $m > 0 {
.items- #{$m} {
width : 2em * $m ;
}
$m : $m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $item in class01 , class02 { //$item就是遍历了in关键词后面的类名列
. #{$item} {
background-color : purple ;
}
}
//会编译成 .class01 , .class02 {background-color:purple;}
原文地址:https://www.jb51.cc/wenti/3279100.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。