Sass|Sass 入门 Sass入门

Sass 入门 Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
Sass和Scss的区别
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
【Sass|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 Home About Blog

想选中 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 调用的话，不会产生任何代码。