Sass笔记（CSS 的预编译语言）

在线转换：https://www.sass.hk/css2sass/
Sass 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）等功能。

SCSS文件的后缀：.scss
SASS文件的后缀：.sass

在项目中还是引用“.css”文件，Sass 只不过是做为一个预处理工具：用SASS的格式写好样式文件，编译成为CSS文件，在项目中调用。

一、Sass的基本特性-基础
1.1变量

（1.1.1）示例（全局变量–变量定义在最外层）：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack; //font: 100% Helvetica, sans-serif;
color: $primary-color; //color: #333;
}
（1.1.2）示例（局部变量–变量定义在样式名中）：
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
（1.1.3）示例（全局变量–变量名：变量值！global）
color:red!global;则表示在块内块外都可以使用这个变量。（1.1.4）变量默认值默认变量：color:red ! global; 则表示在块内块外都可以使用这个变量。（1.1.4）变量默认值默认变量：color:red!global;则表示在块内块外都可以使用这个变量。（1.1.4）变量默认值默认变量：baseLineHeight:1.5 !default;
覆盖默认变量：
只需要在默认变量之前重新声明下变量即可。
即：$baseLineHeight: 2;
baseLineHeight:1.5!default;调用baseLineHeight: 1.5 !default; 调用baseLineHeight:1.5!default;调用baseLineHeight时，当变量变量已经被赋值，不会再被重新赋值；如果变量还没有被赋值，则会被赋予新的值。
例子：
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
调用时变量值为2。
例子：
$baseLineHeight: null;
$baseLineHeight: 1.5 !default;
调用时变量值为1.5。

1.2嵌套
（1.2.1选择器嵌套）
示例1：
#main p {
width: 100%;
.redbox {
background-color: #ff0000;
}
}
编译为：
#main p {
width: 100%; }
#main p .redbox {
background-color: #ff0000;}

（1.2.2伪类嵌套—引用父选择器）
示例1：
a {
font-weight: bold;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
编译为：
a {
font-weight: bold;}
a:hover {
text-decoration: underline; }
body.firefox a {font-weight: normal; }
注意：& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。
示例2：
#main {
color: black;
&-sidebar { border: 1px solid; }
}
编译为：
#main {
color: black; }
#main-sidebar {
border: 1px solid; }
示例3：
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
编译为：
clearfix:before, .clearfix:after {
content: “”;
display: table;
}

（1.2.3属性嵌套）
.funky {
font: {
family: fantasy;
size: 30em;
}
}
编译为：
.funky {
font-family: fantasy;
font-size: 30em; }

1.3混合宏
（1.3.1 声明混合宏）
示例1：简单的混合宏
声明名称参数
@mixin border-radius(KaTeX parse error: Expected '}', got 'EOF' at end of input: radius){ //(radius:5px)传默认值
-webkit-border-radius: $radius;
border-radius: KaTeX parse error: Expected 'EOF', got '}' at position 9: radius; }̲ 示例2：复杂的混合宏 @mi…shadow…) { //多个参数用…表示
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
（1.3.2 调用混合宏）
（其他样式中调用混合宏）
无参或者含有默认参数时的调用：
button {
@include border-radius; //@include 名称
}
传参时的调用：
.box {
@include border-radius(3px); //调用并传参
}
（混合宏内调用混合宏）
@mixin compound {
@include header-text;
}
@mixin 可以用 = 表示，而 @include 可以用 + 表示

1.4扩展/继承
示例1：（普通样式延伸）
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
}
.btn-primary {
background-color: #f36;
@extend .btn;
}
编译为：CSS
.btn, .btn-primary {
border: 1px solid #ccc;
padding: 6px 10px;
}
.btn-primary {
background-color: #f36;
}
示例2：（继续延伸）
当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个。
示例3：（选择器列）
如 .foo .bar 或 .foo + .bar不可以延伸给其他元素，但是，却可以将其他元素延伸给选择器列。
#fake-links .link { //选择器列
@extend a;}
a {
color: blue;
&:hover {
text-decoration: underline;}
}

编译为：
a, #fake-links .link {
color: blue; }
a:hover, #fake-links .link:hover {
text-decoration: underline; }
示例4：（在 @media （或者其他 CSS 指令）中使用 @extend，必须延伸给相同指令层中的选择器）

@media print {
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
}

1.5占位符选择器 %foo（@extend-Only 选择器）
%mt5 {
margin-top: 5px;
}
注意：这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。
%mt5 {
margin-top: 5px;
}
.btn {
@extend %mt5;
}
编译为：CSS
.btn {
margin-top: 5px;
}
注意：调用混合宏时，不能智能的将相同的样式代码块合并在一起。可以传参数
使用继承/扩展时，可以将相同的样式代码块合并在一起。不能传参数；不调用也编译
使用占位符时，可以将相同的样式代码块合并在一起。和继承基本相同；不调用不编译

1.6插值语句#{}（通过 #{} 插值语句可以在选择器或属性名中使用变量）
示例1：
@mixin set-value($side, $value) {
@each $prop in KaTeX parse error: Expected '}', got '#' at position 22: …ties { #̲{prop}-#{$side}: $value;
}
}
注意：混合宏（@mixin）不能用#{}插值。
@extend（继承、占位符%）中可以使用插值。

1.7注释
（1.7.1）单行注释//
（1.7.2）多行注释/注释的内容/
注意：多行注释方式会在编译出来的 CSS 显示，单行注释方式在编译出来的 CSS 中不会显示。
（1.7.3）多行注释中输出变量值：
KaTeX parse error: Expected 'EOF', got '#' at position 75: …mework version #̲{version}. */

1.8数据类型
数字: 如，1、 2、 13、 10px；
字符串：有引号字符串或无引号字符串，如，“foo”、 ‘bar’、 baz；
颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
布尔型：如，true、 false；
空值：如，null；
值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

（1.8.1）字符串
有引号字符串 (quoted strings)，如 “Lucida Grande” 、‘http://sass-lang.com’；
无引号字符串 (unquoted strings)，如 sans-serifbold。
注意：使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串。

（1.8.2）列表（指 Sass 如何处理 CSS 中：margin: 10px 15px 0 0或font-face: Helvetica, Arial, sans-serif）
sass列表函数：
nth函数（nth function）可以直接访问值列表中的某一项；
join函数（join function）可以将多个值列表连结在一起；
append函数（append function）可以在值列表中添加值；
@each规则（@each rule）则能够给值列表中的每个项目添加样式。
注意1：如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。
注意2：例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。
（1.8.3）Maps
键值对的集合：如 (key1: value1, key2: value2)
（1）map-get函数用于查找键值；
（2）map-merge函数用于map和新加的键值融合；
（3）@each命令可添加样式到一个map中的每个键值对。
注意： (key1: value1, key2: value2)会被List函数转换为 key1 value1, key2 value2 ，反之则不能。

二、Sass的基本特性-运算
2.1加法
（2.1.1 变量加法）
$sidebar-width: 220px;
$content-width: 720px;
.container {
width: $sidebar-width + $content-width;
margin: 0 auto;
}
（2.1.2 属性加法）（需要注意单位）
.box {
width: 20px + 8in; //in(英尺)
}

2.2减法
减法和加法运算类似，同样需要注意单位。

2.3乘法
.box {
width: 10px * 2;
}
注意：只需要为一个数值提供单位即可。且在运算中有不同类型的单位时，也将会报错。

2.4除法
（2.4.1）
.box {
width: (100px / 2);
}
注意：需要给运算的外面添加一个小括号( )。
（2.4.1）
.box {
width: 100px / 2 + 2in;
}
注意：“/”符号在已有的数学表达式中时，也会被认作除法符号。
（2.4.1）
$width: 1000px;
$nums: 10;
.item {
width: $width / 10; //width: $width / $nums;
}
注意：当用变量进行除法运算时，“/”符号也会自动被识别成除法。
综合上述，”/ ”符号被当作除法运算符时有以下几种情况：
• （2.4.1）如果数值被圆括号包围。
• （2.4.2）如果数值是另一个数学表达式的一部分。
• （2.4.3）如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
注意：如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。

2.5颜色运算
（2.5.1 普通颜色值运算）
p {
color: #010203 + #040506; //color: #010203 * 2;
}
编译为：
p {
color: #050709;
}
（2.5.2 颜色值包含 alpha channel（rgba 或 hsla 两种颜色值））
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译为：
p {
color: rgba(255, 255, 0, 0.75); }
注意：必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
（2.5.3 颜色值通过opacify 或 transparentize来改变透明度alpha）
KaTeX parse error: Expected '}', got 'EOF' at end of input: …color: opacify(translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
编译为：
p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25); }
（2.5.4 颜色值格式修改–IE滤镜）
$translucent-red: rgba(255, 0, 0, 0.5);
KaTeX parse error: Expected 'EOF', got '#' at position 8: green: #̲00ff00; div { …green)}’, endColorstr=’#{ie-hex-str($translucent-red)}’);
}
编译为：
div {
filter: progid:DXImageTransform.Microsoft.gradient(enabled=‘false’, startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

2.6字符运算
（2.6.1 字符串连接）
KaTeX parse error: Expected '}', got '#' at position 61: …{ content: " #̲{content} "; //content: " Hello Sass! ";
}
（2.6.2 直接通过 + 把字符连接）
div {
cursor: e + -resize; //cursor: e-resize;
}
（2.6.3 有引号字符与无引号字符相连接）
p:before {
content: “Foo " + Bar; //有引号字符 + 无引号字符 = 有引号字符串
font-family: sans- + “serif”; //无引号字符 + 有引号字符 = 无引号字符串
}
编译为：
p:before {
content: “Foo Bar”;
font-family: sans-serif; }
（2.6.4 在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值）
KaTeX parse error: Expected '}', got '#' at position 65: …ontent: "I ate #̲{value} pies!”; //content: “I ate 7px pies!”;
}

2.7关系运算
<, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型

2.8 布尔运算
and、or、 not 运算

2.9数组运算
数组不支持任何运算方式。

三、函数
（3.1 hsl）
p {
color: hsl(0, 100%, 50%);
}

编译为
p {
color: #ff0000; }
（3.2 自定义函数）
grid−width:40px;@functiongrid−width(grid-width: 40px; @function grid-width(grid−width:40px;@functiongrid−width(n) {
@return $n * $grid-width;
}
#sidebar { width: grid-width(5); }

编译为
#sidebar {
width: 200px; }

四、@-Rules 与指令
（4.1 @import：允许其导入 SCSS 或 Sass 文件）
示例：（导入单个文件）
@import “foo.scss”;

或
@import “foo”;
示例：（同时导入多个文件）
@import “rounded-corners”, “text-shadow”;
示例：（导入文件时用#{ } 插值语句）
KaTeX parse error: Expected '}', got 'EOF' at end of input: …/css?family=\#{family}");
注意：
在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries
如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。
@import “colors”;

上面的例子，导入的其实是 _colors.scss 文件

（4.2 @media）
Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。
示例1：（样式中嵌套@media）
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}

编译为：
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
示例2：（@media嵌套@media）
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}

编译为
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
注意：@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值。

（4.3 @extend）
1.4扩展/继承—有说明

（4.4 @at-root）
.parent {
…
@at-root {
.child1 { … }
.child2 { … }
}
.step-child { … }
}

编译为:
.parent { … }
.child1 { … }
.child2 { … }
.parent .step-child { … }
在media之外/之内： @at-root (without: …) and @at-root (with: …)

（4.5 @debug）
@debug 10em + 12em;

编译为
Line 1 DEBUG: 22em

（4.6 @warn）
@warn “Assuming #{$x} to be in pixels”;

（4.7 @error）
@error “KaTeX parse error: Expected 'EOF', got '#' at position 28: … unitless, was #̲{x}.”;

五、控制指令
（5.1 if()）

（5.2 @if）
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
p {
@if 1 + 1 == 2 { border: 1px solid; } //@if 5 < 3 或 @if null
}
注意：@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。

（5.3 @for）
两种格式：
@for $var from through //左闭右闭区间
@for $var from to //左闭右开区间
区别：当使用 through 时，条件范围包含与的值，而使用 to 时条件范围只包含的值不包含的值。
注意：和必须是整数值。
示例：
@for KaTeX parse error: Expected '}', got '#' at position 30: …gh 3 { .item-#̲{i} { width: 2em * $i; }
}

（5.4 @each）
格式: $var in , 是一连串的值，也就是值列表。
示例：（一个变量----一个值列表）
@each KaTeX parse error: Expected '}', got '#' at position 50: …alamander { .#̲{animal}-icon {
background-image: url(’/images/#{$animal}.png’);
}
}
示例：（多个变量----多个值列表）
@each $animal, $color, KaTeX parse error: Expected '}', got '#' at position 156: …te, move) { .#̲{animal}-icon {
background-image: url(’/images/#{$animal}.png’);
border: 2px solid $color;
cursor: $cursor;
}
}
示例3：（多个变量----对象）
@each $header, KaTeX parse error: Expected '}', got '#' at position 45: …h3: 1.2em) { #̲{header} {
font-size: $size;
}
}

（5.5 @while）
示例：
$i: 6;
@while KaTeX parse error: Expected '}', got '#' at position 17: … > 0 { .item-#̲{i} { width: 2em * $i; }
$i: $i - 2;
}

（5.6 @content）
示例：（向混合样式中导入内容）
@mixin apply-to-ie6-only {

html {
@content; //导入的地方
}
}
@include apply-to-ie6-only {
#logo { //导入的内容
background-image: url(/logo.gif);
}
}

编译为

html #logo {
background-image: url(/logo.gif);
}

（输出方式：）
嵌套输出方式编译：sass --watch test.scss:test.css --style nested
展开输出方式编译：sass --watch test.scss:test.css --style expanded
紧凑输出方式编译：sass --watch test.scss:test.css --style compact //样式都在一行
压缩输出方式编译：sass --watch test.scss:test.css --style compressed //样式压缩

将.scss文件转化的css代码并保存到一个新文件中：
sass app.scss app.css

Sass笔记（CSS 的预编译语言）相关推荐

css预处理器_【第十一课】初尝CSS的预处理器
前言从零开始学前端系列课程,与传统的视频大课堂教学不同,没有填鸭:也普通做练习题的方式不同,没有假想的模拟题. 本课程拆出80个左右必须掌握的技能点,并对其分组,从易到难地列出学习曲线.同时从真实项 ...
【CSS】Less/sass（css预处理器）
Less/sass(css预处理器) 作用:1.嵌套2.变量3.传参4.计算可以嵌套标签属性设置,如在less中写: css文件中可以生成: css中变量写为: 格式较为繁琐,在less中可以写作: ...
[css] 你知道css的预处理器和后处理器都有哪些吗？它们有什么区别呢？
[css] 你知道css的预处理器和后处理器都有哪些吗?它们有什么区别呢? 目前最主流的 CSS 预处理器:Sass.LESS.Stylus .优缺点优点:语言级逻辑处理,动态特性,改善项目结构缺点: ...
scss、sass 和 css 的区别
项目中,会经常使用诸如scss.sass的style样式,它们和css有什么区别呢? less大家应该都不陌生,同样的scss.sass一样,它们都可以称为:CSS预处理器语言. 简单来说,scss和 ...
amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
sass笔记 - 实战中颜色的玩法总结
sass笔记 - 实战中颜色的玩法总结这篇文章是针对自己封装UI组件库的读者的,旨在为项目提供通用的颜色方案本文需要读者拥有CSS.SASS/SCSS相关基础知识. jack lee 的 CSDN ...
amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
amazeui学习笔记--css（HTML元素2）--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

Sass笔记（CSS 的预编译语言）

Sass笔记（CSS 的预编译语言）相关推荐

最新文章

热门文章