赞
踩
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-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”即可应用对应的语法,否则报错
- 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 ; //使用全局变量
- }
- }
局部变量是声明在元素内的变量,后面添加!global 会提升为全局变量
- $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 ;
- }
- %m5 { background-color : lightblue ;}
- .P1 { @extend %m5 ; }
使用% 声明的代码块,如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起,代码变得十分简洁。- @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;}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。