SASS/SCSS的学习归纳
一种CSS的预处理器。Sass扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass生成良好格式化的CSS 代码,易于组织和维护。sass和scss区别:sass使用严格的sass语法,不使用大括号和分号scss使用大括号和分号,与less基本相同(推荐使用)
二、scss环境搭建
1.安装ruby语言环境,直接解压ruby工具到c盘根目录
2.配置ruby的环境变量,ruby下面的bin目录到path下面即可
3.安装sass解释器:执行命令行ruby install sass
注意:如果安装不成功,先安装haml插件:ruby install haml
4.在开发工具中集成sass解释器:webstrome在setting中->tools->filewatcher,添加scss文件的监视器,program选择scss.bat文件。
三、基本语法
1.变量定义:$变量名:变量值
1.1默认变量:sass的默认变量仅需要在值后面加上!default即可,用于降低当前变量取值的优先级。
1.2特殊变量:如果变量作为属性名则必须要以#{$variables}形式使用。可用于拼凑。
1.3全局变量:在变量值后面加上!global即为全局变量。
2.变量使用:直接在样式表中,用$变量名来替换常量即可
3.变量分类:全局变量、局部变量
3.1全局变量:写在文件的最外层,所有的样式表都能直接使用
3.2局部变量:定义在样式表内层,当前层样式表和里层样式表可用
4.嵌套
4.1 选择器嵌套:select1{select2{select3{。。。。}}}
4.2 伪类选择器嵌套:select{ &:伪类选择/伪对象选择{} } 注:&表示父元素选择器
4.3 属性嵌套:select:{子属性:值;子属性:值;子属性:值;子属性:值} 如:border:{ size:1px;style:dashed;color:black;}
5.mixin混合
5.1 应用场景:复用性很高的代码块,会封装成函数进行重复使用
5.2 基本语法格式:@mixin 函数名(参数名:值){}
5.3 使用方式:@include 函数名(参数);
注意:如果小括号中没有参数,可以省略小括号不写
6.继承
6.1 @extends,继承某个选择器的所有样式,格式@extends 选择器名 select2{ @extends select1;}
6.2 %:占位符,作用:防止基础选择器被直接编译成css使css出现冗余代码。格式: %基础选择器{ }
7.逻辑运算
7.1 基本的算术运算:支持+ - * /运算
7.2 If判断,格式:@if(){}@elseif(){}@else{}
7.3 三木运算:属性:if(判断内容,取值1,取值2)
7.4 for循环:@for 变量 from value1 through/to value2 注:to不包含执行value2