Sass 入门
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
Sass和Scss的区别
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
Sass 语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
SCSS 语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sass的输出方式
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
sass
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
nested
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
expanded
大括号另起一行
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
compact
单行css
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
compressed
压缩css
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
sass声明变量
sass 的默认变量仅需要在值后面加上 !default 即可。
设置默认值主要是用来覆盖的
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
最后结果为2
在组件开发中我们会经常用到default
例如
$grey-1: #ffffff !default;
$grey-2: #fafafa !default;
$grey-3: #f5f5f5 !default;
$grey-4: #e8e8e8 !default;
$grey-5: #d9d9d9 !default;
$grey-6: #bfbfbf !default;
$grey-7: #8c8c8c !default;
$grey-8: #595959 !default;
$grey-9: #262626 !default;
$grey-10: #000000 !default;
局部变量与全局变量
在外部的为全局变量
//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}
//CSS
.block {
color: orange;
}
em a {
color: red;
}
span {
color: orange;
}
选择器嵌套
//HTML
想选中 header 中的 a 标签，在写 CSS 会这样写：
//CSS
nav a {
color:red;
}
header nav a {
color:green;
}
那么在 Sass 中，就可以使用选择器的嵌套来实现：
//Scss
nav {
a {
color: red;
header & {
color:green;
}
}
}
& 代表父选择器
属性嵌套
属性嵌套就是方便省略前缀
// Css
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
//Scss
.box {
border {
top: 1px solid red;
bottom: 1px solid green;
}
}
伪类嵌套
伪类嵌套与属性类似
// Css
.box:before{
content:"伪元素嵌套";
}
//Scss
.box{
&: before {
content:"伪元素嵌套";
}
}
混合宏
混合宏适用于复杂的样式
@mixin 在调用中要用@include
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
button {
@include border-radius;
}
混合宏还可以传参
不带参数值
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(3px);
}
带参数值
带参数值可以设为默认值
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
同时可以被覆盖
.box {
@include border-radius(50%);
}
继承
使用@extend
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
编译出来后
//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
占位符%placeholder
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
// SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
混合宏 占位符 继承对比
混合宏更适用于有参数的传递，没有参数额话不推荐因为会让代码冗余
占位符的话非常推荐因为用占位符定义的变量如果没有用extend调用不会生成css，非常好
如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
