sass预处理css的简单使用

概念

sass 中文官网 Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。特点 完全兼容 CSS3 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能 通过函数进行颜色值与属性值的运算 提供控制指令 (control directives)等高级功能 自定义输出格式语法 1.嵌套写法，文件名要是.scss #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } } 2.缩进写法，这是最早的sass写法 #header color: black; .navigation font-size: 12px; .logo width: 300px;

4.变量的定义

$符 $width: 5em;

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器

$color:red; .box { //这里指.box &:hover { background-color: $color; } .son { width: 100px; height: 100px; background-color: burlywood; //这里指 .son &:hover { background-color: blueviolet; } p {color:$color; //这里指 p &:hover { background-color: blueviolet; } } } span {color: #000;} h3 {color: #c6c5c6;} }

5. 属性嵌套 有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky { font: { family: fantasy; size: 30em; weight: bold; } } //编译为 .funky { font-family: fantasy; font-size: 30em; font-weight: bold; }

注释有 /**/ // 。 //是不会编译出来

SassScript

数据类型 数字1, 2, 13, 10px字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz颜色，blue, #04a3f9, rgba(255,0,0,0.5)布尔型，true, false空值，null数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serifmaps, 相当于 JavaScript 的 object，(key1: value1, key2: value2) 2.运算 2.1 数字运算 SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

除法需注意的地方

如果值，或值的一部分，是变量或者函数的返回值 如果值被圆括号包裹 如果值是算数表达式的一部分 p { font: 10px/8px; // Plain CSS, no division $width: 1000px; width: $width/2; // Uses a variable, does division width: round(1.5)/2; // Uses a function, does division height: (500px/2); // Uses parentheses, does division margin-left: 5px + 8px/2px; // Uses +, does division } //编译为 p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; } 函数 SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用： p { color: hsl(0, 100%, 50%); } p { color: #ff0000; }

指令

@import 导入文件

注意 1.但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。 2. 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

文件拓展名是 .css；文件名以 http:// 开头；文件名是 url()；@import 包含 media queries。

2.@media和在css中使用一样，如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

.sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } //编译为 .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } }

3.@extend 继承样式

.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } 表示的是.error的样式被.seriousError继承了

混合指令（与JavaScript中的函数相似）

1. 定义 混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

简写 为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示，

//定义 @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }

2.引用

1.定义之后，在父元素中引用编译 .page-title { @include large-text; padding: 4px; margin-top: 10px; } //编译后 .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; } 2.直接定义后编译（就像是函数的调用一样） @mixin silly-links { a { color: blue; background-color: red; } } @include silly-links; //编译后 a { color: blue; background-color: red; }

函数指令

定义函数@function name($n){} 调用 name(5)

$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } 编译为 #sidebar { width: 240px; }