在线转换: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-’;
无引号字符串 (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