一、什么是Sass/Scss.

　　Sass和Scss是指的是同一个东西。Sass的语法更近ruby，而Scss更接近css代码。Sass/Scss是对css的扩展，但是scss/sass不能之间直接运行在浏览器中，需要编译成css.

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　 Sass/Scss 随笔

　　二、在命令行中安装Sass和使用

　　首先需要在电脑上安装node.然后使用npm安装Sass.　

　　npm install -g sass

　　常用的命令

　　sass main.scss main.css
　　sass --watch main.scss:main.css

　　三、Sass的语法

　　a、nesting(嵌套)　

#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } }

　　编译后：

#main p { color: #00ff00; width: 97%; 
} #main p .redbox { background-color: #ff0000; color: #000000; 
}

　　属性嵌套：　　

 

.container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex:{ direction: column; wrap: nowrap; } align-items: center; padding: 3rem 0; box-sizing: border-box; }

　　编译后：

.container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding: 3rem 0; box-sizing: border-box;
}

　　伪类选择器的嵌套：　

.documentation-links .documentation-link { text-decoration: none; color: map-get($colors,main); display: block; padding: $size-tiny; border: $border-default; &:hover, &:active { color: white; background: map-get($colors,secondary); border-color: map-get($colors,secondary); } }

 

　　编译后　

.documentation-links .documentation-link { text-decoration: none; color: map-get($colors,main); display: block; padding: $size-tiny; border: $border-default;
} .documentation-links .documentation-link:hover, .documentation-links .documentation-link:active { color: white; background: map-get($colors,secondary); border-color: map-get($colors,secondary);
}

 

　　b、Variables(变量)

　　变量名字需要以$符号开始。

$main-color:#521751; .sass-introduction { border: 0.05rem solid $main-color; background: #fae5ff; padding: 2rem; text-align: center; box-shadow: 0.2rem 0.2rem 0.1rem #ccc; width: 90%; box-sizing: border-box;
}

　　编译后：　　

.sass-introduction { border: 0.05rem solid #521751; background: #fae5ff; padding: 2rem; text-align: center; box-shadow: 0.2rem 0.2rem 0.1rem #ccc; width: 90%; box-sizing: border-box;
}

　　变量表示list　

$border-default:0.05rem solid $main-color; $font-default:Arial, sans-serif; body { font-family: $font-default; margin: 0;
} .sass-introduction { border: $border-default; background: #fae5ff; padding: 2rem; text-align: center; box-shadow: 0.2rem 0.2rem 0.1rem #ccc; width: 90%; box-sizing: border-box;
}

　　变量表示map　

$colors: (main : #521751,secondary : #fa923f); .documentation-links .documentation-link { text-decoration: none; color: map-get($colors,main); display: block; padding: 0.2rem;
}

　　　编译后　

.documentation-links .documentation-link { text-decoration: none; color: #521751; display: block; padding: 0.2rem;
}

　　变量的简单计算　

$size-default: 1rem; .sass-introduction { border: $border-default; background: lighten(map_get($colors,main),72%); padding: $size-default * 2; text-align: center; box-shadow: $size-tiny $size-tiny 0.1rem #ccc; width: 90%; box-sizing: border-box;
}

 

　　编译后　

.sass-introduction { border: $border-default; background: lighten(map_get($colors,main),72%); padding: 2rem; text-align: center; box-shadow: $size-tiny $size-tiny 0.1rem #ccc; width: 90%; box-sizing: border-box;
}

 

　　c、Sass的内置函数　

$colors: (main : #521751,secondary : #fa923f); .sass-introduction { border: $border-default; background: lighten(map_get($colors,main),72%); padding: 2rem; text-align: center; box-shadow: 0.2rem 0.2rem 0.1rem #ccc; width: 90%; box-sizing: border-box;
}

 

　　编译后：　

.sass-introduction { border: 0.05rem solid #521751; background: #f7e1f6; padding: 2rem; text-align: center; box-shadow: 0.2rem 0.2rem 0.1rem #ccc; width: 90%; box-sizing: border-box;
}

　　sass中存在着大量的内置函数。

　　d、partial和import

　　sass中可以将共享的变量提取到一个单独的文件中，然后通过@import导入使用，编译后的css中不包含这些变量。

　　提取变量到variables.scss文件中　　　

$colors: (main : #521751,secondary : #fa923f);
$border-default:0.05rem solid map-get($colors,main);
$font-default:Arial, sans-serif;
$size-default: 1rem;
$size-tiny : 0.2rem;

 

　　在main.scss中导入就可以使用这些变量。　

@import "_variables.scss";

　　我们可以在main.scss中导入其他的scss文件，文件编译后会被合并到同一个scss文件中，这样可以只需要发一次http请求。而css文件的导入不会合并文件。

 

 

　　e、媒体查询　

html { font-size: 94.75%; @media (min-width: 40rem) { font-size: 125%;
  } }

 

　　编译后　

html { font-size: 94.75%;
} @media (min-width: 40rem) { html { font-size: 125%;
  } }

　　f.inheritance　

.sass-section{ border: $border-default; background: lighten(map_get($colors,main),72%); text-align: center; width: 90%; box-sizing: border-box; @media (min-width: 40rem) { width: 30rem; } } .sass-introduction { @extend .sass-section; padding: $size-default * 2; box-shadow: $size-tiny $size-tiny 0.1rem #ccc;

} .sass-details { @extend .sass-section; padding: $size-default; margin: 2rem 0;

}

　　编译后　　　

.sass-section, .sass-details, .sass-introduction { border: 0.05rem solid #521751; background: #f7e1f6; text-align: center; width: 90%; box-sizing: border-box;
} @media (min-width: 40rem) { .sass-section, .sass-details, .sass-introduction { width: 30rem;
  } } .sass-introduction { padding: 2rem; box-shadow: 0.2rem 0.2rem 0.1rem #ccc;
} .sass-details { padding: 1rem; margin: 2rem 0;
}

　　g、mixin

　　Sass中的混合相当自定义的函数。

@mixin display-flex(){ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
} @mixin media-min-width($width){ @media (min-width: $width){  @content;
  } } .container { @include display-flex(); flex:{ direction: column; wrap: nowrap;
  } align-items: center; padding: $size-default * 3 0; box-sizing: border-box;  @include media-min-width(40rem){ padding: 3rem 0; } }

　　里面的@content使下面的 padding: 3rem 0;

.container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding: 3rem 0; box-sizing: border-box;
} @media (min-width: 40rem) { .container { padding: 3rem 0;
  } }

　　　

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄