一、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、注释

三、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/

Sass用法

一、Sass安装和使用：

二、Sass基本用法

三、Sass代码重用

三、Sass高级用法

猜你喜欢