Sass学习
网站学习地址：
Sass中文网：https://www.sass.hk/docs/#t7-3
Airen的博客：https://www.w3cplus.com/preprocessor/understanding-sass-list.html
Whqet前端开发的博客：https://www.cnblogs.com/whqet/p/Sassmap.html
绿叶学习网：http://www.lvyestudy.com/sass/sass_list.aspx
Sass 嵌套规则
|
Sass .box{ Color:red; .box1{ Font-size:15px; } } Css .box{ Color:red; } .box .box1{ //变成后代选择器 Font-size:15px; } |
父选择器&
|
Sass .box{ Color:red; &：hover{ Font-size:15px; } } Css .box{ Color:red; } .box:hover{ //变成父元素的hover效果 Font-size:15px; } |
属性嵌套
|
Sass .box{ Color:red; Font:{ Size:15px; Weight:blod; } } Css .box{ Color:red; Font-size:15px; Font-weight:blod; } |
注释
|
Sass中的//注释编译在css中不存在，/**/注释编译在css中是存在的。 #{$bl} —— 可以在注释中解析出变量 $bl:“变量”; Eg:/* 我是 #{$bl}*/ =>/*我是变量*/ |
变量
|
写法：$a:”我是变量”;$相当于js中的var 使用： $a:10px; .box{ Font:{ Size:$a; } } 结果： .box{ Font-size:10px; } 用途：当一个数使用的地方很广时，可以设为变量 |
数据类型
字符串
|
$a:”我是有引号的字符串”; $b:blod; |
Mixin
|
相当于js中的function @mixin cs1($selector){//声明 body #{$selector}:before{ content:"hi"; } } @include cs1(".box1");//使用 用途：当一个方法很多地方都需要时，可以用这个创建 Eg: 平时清除浮动时的 .box:after{ Content:””; Display:table; Clear:both; } 可以改为 @mixin float-after($selector){ #{$selector}:after{ Content:””; Display:table; Clear:both; } } @include float-after(“.box”); |
数组（列表）
|
写法：$list:(1,2,3); $list:(1 2 3); $list:1,2,3; $list:1 2 3 ; $list:((a,b,c),(d,e,f)); 获取： Nth($list,1)//选取list中索引为1的数（1） Length($list)//得到list的个数 append($list,”添加一个数”) 用途：可以用于写多个值进行选取 Eg: $list:( (0 0 10px 20px), (2px 1px) ) .box{ Margin:nth($list,1); } |
Map值(object)
|
写法： $obj:( A:”你”, B:”好” ) 获取方式：具体看https://www.cnblogs.com/whqet/p/Sassmap.html Eg: $obj( Default:( Font-size:10px; Color:#fff; ), one:{ Font-size:20px; Color:#000; } ) |
运算
|
+ - * / /加号可以做加法运算，也可以直接加上单位 //乘法不能带着符号相乘，只能有一边有符号 //带着符号相除后得到的结果要加上符号，或者用带符号的除以不带符号的 |
颜色的运算
|
Eg: P{ Color:#666+#111; } //rgba之间运算透明度必须为一样,不一样以前面的为准。 Eg: p{ Background:rgba(2,2,2,0.6) + rgba(3,3,5,0.6); } |
插值语句
|
#{$bl} 就是将一个变量插在一个地方去 Eg: $bl:a; P #{$bl}{ Color:red; } 得到： P a { Color:red; } |
控制语句
|
@if @else @if 1>5{ Color:red; } //如果1大于5为真，color就为red； @mixin pd(bool){ @if bool{ Color:red }@else{ Color:blue;} } @include pd(false); 得到：color:blue; |
文件导入@import
|
@import可以将sass、css的外部文件导入到内部来，也可以导入在局部中去。 Eg:@import demo1.scss” |
循环语句@for
|
@for逻辑和js中的for循环差不多 $list:a b c; 写法： $list:aaa bbb ccc; @for $i from 1 through 3 { #{nth($list,$i)}{ color:red; } } $i：相当于for(var i=0;i<10;i++)中的i 1为初始值，3为结束值 结果： aaa { color: red; } bbb { color: red; } ccc { color: red; } |