一、Sass安装和使用:
sass的安装、卸载、版本查询、sass文件后缀名、sass文件转换成css文件、sass文件压缩成css文件、sass监听某个文件或目录、cd进入目录、mkdir创建目录、touch创建文件、返回上一级cd ..、强制退出当前命令control+c;
先安装Ruby再安装Sass(mac电脑自带Ruby)(sudo) gem install sass。Sass直接使用css语法,文件后缀名是.scss。
ruby -v验证ruby是否安装成功。sass -v验证sass是否安装成功。(sudo) gem update sass卸载sass。
sass文件转换成css文件:sass layout.scss layout.css
sass文件压缩成css代码:sass —style compressed layout.scss layout.css
sass监听某个文件或目录:注意冒号,一旦源文件有变动,就自动生成编译后的版本。
//watch a file sass —watch input.scss:output.css
//watch a directory sass —watch app/sass:public/stylesheets
二、Sass基本用法
变量、计算功能、嵌套、注释、重要注释。
1、变量
sass允许使用变量,变量以$开头。变量嵌套在字符串中,必须放在#{}之中。
$purple: #f0f;
.box{
color: $purple;
}
$side: left;
.rounder{
border-#{$side}-radius: 10px;
}
2、计算功能
sass允许在代码中使用算式。使用除法计算需要加括号(),避免出错。
$var: 5;
.box{
position: absolute;
top: 50px + 100px;
right: $var * 10%;
margin: (14px/2);
}
3、嵌套
sass允许选择器嵌套。属性嵌套后面必须加冒号。在嵌套的代码块内,可以使用&符号引用父元素。
.box{
h1{
font-size: 12px;
}
.item{
margin: 20px;
padding: 20px;
}
border:{
color: #f0f;
width: 2px;
style: solid;
}
}
a{
color: #666;
&:hover{
color: #f00;
}
}
4、注释
css注释/**/,会保留到编译后的文件。单行注释//只保留在sass源文件中,编译后会被省略。重要注释/*!*/,用于版权声明保留到最后。
三、Sass代码重用
sass的继承@extend、混合宏@mixin 混合宏的调用@include、插入外部文件@import。
mixin的强大之处,在于指定参数和缺省值。使用的时候,根据需要加入参数。
实例用来生成浏览器前缀,if语句判断。
1、继承
sass允许一个选择器,继承另一个选择器,使用@extend命令。
.block{
display: flex;
flex-direction: row;
}
.box{
@extend .block;
}
2、Mixin
混合宏,可以理解成函数,可以重用的代码快。使用@mixin命令,定义一个代码块。使用@include命令,调用mixin。
mixin的强大之处,在于指定参数和缺省值。使用的时候,根据需要加入参数。
@mixin float{
float: left;
margin-left: 10px;
}
.box{
@include float;
}
@mixin float($value:10px){
float: left;
margin-right: $value;
}
.box{
@include float(20px);
}
mixin的实例,用来生成浏览器前缀:
@mixin circle($ver,$hoz,$circle:50%){
border-#{$ver}-#{$hoz}-radius: $circle;
-moz-border-#{$ver}-#{$hoz}-radius: $circle;
-webkit-border-#{$ver}-#{$hoz}-daidus: $circle;
}
.box{
@include circle(top, left);
}
mixin实例,if语句判断:
@mixin flex($direction:column,$inline:block){
display: if($inline==block,flex,inline-flex);
flex-direction: $direction;
flex-wrap: wrap;
}
.box{
@include flex;
}
3、插入外部文件
@import './layout.css'
三、Sass高级用法
sass的条件语句@if、循环语句@for @while @each、自定义函数@function @return。
1、条件语句
@if用来判断,配套的还有@else命令。
.box{
@if 1 + 1 == 2 { background: #f0f;}
@if 5 < 3 { background: #f0c; }
}
.box{
@if (1 + 1 == 2){
background: #f0f;
}@else{
background: #f0c;
}
}
2、循环语句
Sass支持for循环、while循环、each命令。
@for $i from 1 to 3{ //to不包括结尾的值
.item#{$i}{
border:#{$i}px solid #f0f;
}
}
@for $i from 1 through 3{ //through包括结尾的值
.item#{$i}{
border:#{$i}px solid #f0f;
}
}
$i:3;
@while $i>0{
.item#{$i}{
border: #{$i}px solid #f0f;
}
$i: $i - 1;
}
@each $num in a,b,c{
.box#{$num}{
background: url(#{$num}.png) no-repeat 0 0;
}
}
3、自定义函数
Sass允许用户编写自己的函数。
@function double($n){
@return $n * 2;
}
.box{
width: double(100px);
}
参考资料:http://www.ruanyifeng.com/blog/2012/06/sass.html
Sass中文网:https://www.sass.hk/docs/
Sass在线编辑器:https://www.sassmeister.com/