SASS使用总结 - Lz_Tiramisu
程序员文章站
2022-03-19 12:56:38
...
简单用法：
变量
sass中可以定义变量，方便统一修改和维护。
//sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; body { font-family: $fontStack; color: $primaryColor; } //css style body { font-family: Helvetica, sans-serif; color: #333; }
嵌套
sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。
//sass style nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } //css style 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文件，最后编译为一个css文件，优于纯css的
@import
mixin
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
//sass style //----------------------------------- @mixin box-sizing ($sizing) { -webkit-box-sizing:$sizing; -moz-box-sizing:$sizing; box-sizing:$sizing; } .box-border{ border:1px solid #ccc; @include box-sizing(border-box); } //css style //----------------------------------- .box-border { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
扩展/继承
sass可通过
@extend来实现代码组合声明，使代码更加优越简洁。//sass style .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } //css style .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
颜色
sass中集成了大量的颜色函数，让变换颜色更加简单。
//sass style $linkColor: #08c; a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); } } //css style a { text-decoration: none; color: #0088cc; } a:hover { color: #006699; }
运算
sass可进行简单的加减乘除运算等
//sass style .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; } //css style .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; }
基本语法：
文件后缀名:
.sass(不使用大括号和分号)或者.scss(使用大括号和分号)
导入:
ass的导入(
@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。注释：
sass有两种注释方式，一种是标准的css注释方式
/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。变量：
sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。 sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
//sass style $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } //css style body{ line-height:2; }
特殊变量：
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以
#{$variables}形式使用。//sass style $borderDirection: top !default; $baseFontSize: 12px !default; $baseLineHeight: 1.5 !default; //应用于class和属性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //应用于复杂的属性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; } //css style .border-top{ border-top:1px solid #ccc; } body { font: 12px/1.5; }
多值变量：
分为list类型和map类型，简单来说list类型类似js中的数组，map类型类似于js中的对象
list:
数据可通过空格，逗号或小括号分隔多个值，可用
nth($var,$index)取值。//list定义 //一维数据 $px: 5px 10px 20px 30px; //二维数据，相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px); //使用 //sass style $linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值 a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); } } //css style a{ color:#08c; } a:hover{ color:#333; }
map:
map数据以key和value成对出现，其中value又可以是list。格式为：
$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值, 关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等//sass style $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings { #{$header} { font-size: $size; } } //css style h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }
全局变量：
在变量值后面加上!global
变量机制：
在选择器声明的变量会覆盖外面全局声明的变量
//sass style $fontSize: 12px; body{ $fontSize: 14px; font-size:$fontSize; } p{ font-size:$fontSize; } //css style body{ font-size:14px; } p{ font-size:14px; }
启用global之后的机制：
默认在选择器里面的变量为局部变量，而只有设置了
!global之后才会成为全局变量。嵌套Nesting:
sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
选择器嵌套：
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用
&表示父元素选择器//sass style #top_nav{ line-height: 40px; text-transform: capitalize; li{ float:left; } a{ display: block; padding: 0 10px; color: #fff; &:hover{ color:#ddd; } } } //css style #top_nav{ line-height: 40px; text-transform: capitalize; } #top_nav li{ float:left; } #top_nav a{ display: block; padding: 0 10px; color: #fff; } #top_nav a:hover{ color:#ddd; }
属性嵌套：
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。
//sass style .fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } } } //css style .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }
@at-root:
sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
//sass style //没有跳出 .parent-1 { color:#f00; .child { width:100px; } } //单个选择器跳出 .parent-2 { color:#f00; @at-root .child { width:200px; } } //多个选择器跳出 .parent-3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width:400px; } } } //css style .parent-1 { color: #f00; } .parent-1 .child { width: 100px; } .parent-2 { color: #f00; } .child { width: 200px; } .parent-3 { background: #f00; } .child1 { width: 300px; } .child2 { width: 400px; }
@at-root (without: ...)和@at-root (with: ...)：
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。
//sass style //跳出父级元素嵌套 @media print { .parent1{ color:#f00; @at-root .child1 { width:200px; } } } //跳出media嵌套，父级有效 @media print { .parent2{ color:#f00; @at-root (without: media) { .child2 { width:200px; } } } } //跳出media和父级 @media print { .parent3{ color:#f00; @at-root (without: all) { .child3 { width:200px; } } } } //css style @media print { .parent1 { color: #f00; } .child1 { width: 200px; } } @media print { .parent2 { color: #f00; } } .parent2 .child2 { width: 200px; } @media print { .parent3 { color: #f00; } } .child3 { width: 200px; } @at-root与&配合使用： //sass style .child{ @at-root .parent &{ color:#f00; } } //css style .parent .child { color: #f00; }
应用于@keyframe:
//sass style .demo { ... animation: motion 3s infinite; @at-root { @keyframes motion { ... } } } //css style .demo { ... animation: motion 3s infinite; } @keyframes motion { ... }
混合(mixin)
sass中使用
@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。无参数mixin:
//sass style @mixin center-block { margin-left:auto; margin-right:auto; } .demo{ @include center-block; } //css style .demo{ margin-left:auto; margin-right:auto; }
有参数mixin:
//sass style @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity); } //css style .opacity{ @include opacity; //参数使用默认值 } .opacity-80{ @include opacity(80); //传递参数 }
多个参数的mixin: 调用时可直接传入值，如
@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。//sass style @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; } .imgtext-h li{ @include horizontal-line(1px solid #ccc); } .imgtext-h--product li{ @include horizontal-line($padding:15px); } //css style .imgtext-h li { border-bottom: 1px solid #cccccc; padding-top: 10px; padding-bottom: 10px; } .imgtext-h--product li { border-bottom: 1px dashed #cccccc; padding-top: 15px; padding-bottom: 15px; }
多组值参数mixin: 如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如
$variables...。//sass style //box-shadow可以有多组值，所以在变量参数后面添加... @mixin box-shadow($shadow...) { -webkit-box-shadow:$shadow; box-shadow:$shadow; } .box{ border:1px solid #ccc; @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)); } //css style .box{ border:1px solid #ccc; -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); }
@content:
@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。//sass style @mixin max-screen($res){ @media only screen and ( max-width: $res ) { @content; } } @include max-screen(480px) { body { color: red } } //css style @media only screen and (max-width: 480px) { body { color: red } }
PS：
@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。继承： sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词
@extend，后面紧跟需要继承的选择器//sass style h1{ border: 4px solid #ff9aa9; } .speaker{ @extend h1; border-width: 2px; } //css style h1,.speaker{ border: 4px solid #ff9aa9; } .speaker{ border-width: 2px; }
占位选择器%： 从sass 3.2.0以后就可以定义占位选择器
%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。//sass style %ir{ color: transparent; text-shadow: none; border: 0; } %clearfix{ @if $lte7 { *zoom: 1; } &:before, &:after { content: ""; display: table; font: 0/0 a; } &:after { clear: both; } } #header{ h1{ @extend %ir; width:300px; } } .ir{ @extend %ir; } //css style #header h1, .ir{ color: transparent; text-shadow: none; border: 0; } #header h1{ width:300px; }
如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
ps：在
@media中暂时不能@extend @media外的代码片段，以后将会可以。函数：
sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始， 实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为
lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。//sass style $baseFontSize: 10px !default; $gray: #ccc !defualt; // pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem; } body{ font-size:$baseFontSize; color:lighten($gray,10%); } .test{ font-size:pxToRem(16px); color:darken($gray,10%); } //css style body{ font-size:10px; color:#E6E6E6; } .test{ font-size:1.6rem; color:#B3B3B3; }
运算： sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。
$baseFontSize: 14px !default;
$baseLineHeight: 1.5 !default;
$baseGap: $baseFontSize * $baseLineHeight !default;
$halfBaseGap: $baseGap / 2 !default;
$samllFontSize: $baseFontSize - 2px !default;
//grid
$_columns: 12 !default; // Total number of columns
$_column-width: 60px !default; // Width of a single column
$_gutter: 20px !default; // Width of the gutter
$_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width
条件判断及循环：
@if 可以一个条件单独使用，也可以和@else结合多条件使用
//sass style $lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1; } } p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //css style .ib{ display:inline-block; *display:inline; *zoom:1; } p { color: green; }
三目判断：
语法为：
if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
for循环：
for循环有两种形式，分别为：@for $var from
//sass style @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //css style .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
@each循环：
语法为：
@each $var in
。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。单个字段list数据循环：
//sass style $animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } //css style .puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); }
多个字段list数据循环：
//sass style $animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move); @each $animal, $color, $cursor in $animal-data { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } } //css style .puma-icon { background-image: url('/images/puma.png'); border: 2px solid black; cursor: default; } .sea-slug-icon { background-image: url('/images/sea-slug.png'); border: 2px solid blue; cursor: pointer; } .egret-icon { background-image: url('/images/egret.png'); border: 2px solid white; cursor: move; }
多个字段map数据循环：
//sass style $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings { #{$header} { font-size: $size; } } //css style h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }
sass编译:
命令行编译：
单文件转换：sass style.scss style.css
单文件监听：sass --watch style.scss style.css
文件夹监听：sass --watch sassFileDir:cssFileDir
css文件转换成sass/scss文件：
sass-convert style.css style.sass
sass-convert style.css style.scss
配置项：
运行命令行帮助文档，可以获得所有的配置选项： sass -h
一般常用的有--style，--sourcemap，--debug-info等：
sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
- --style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。
// nested #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // expanded #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compact #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compressed #main{color:#fff;font-weight:bold;text-decoration:underline}
- --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
- --debug-info表示开启debug信息
图形化工具gui koala
sass调试:
sass调试需要开启编译时输出调试信息和浏览器调试功能，两者缺一不可。
开启编译调试信息：
目前sass的调试分为两种，一种为开启debug-info，一种为开启sourcemap（这个将成为主流）。
如开启的是debug-info，则解析的css文件中会有以@media -sass-debug-info开头的代码，如没有则表明没有开启。
如开启的是sourcemap，则在解析的css文件同目录下生成一个.css.map的后缀名文件。
命令行开启调试：
sass --watch style.scss:style.css --debug-info
sass --watch style.scss:style.css --sourcemap
koala开启：
如下图：点击相应的文件，然后就会出现右边的编译选项，即可选择是否开启source map，debug info
开启浏览器调试：
谷歌浏览器调试：
F12打开调试面板，点击调试面板右上角的齿轮图标打开设置，在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS。
开启--sourcemap编译，f12打开调试面板，就可以看到原先右边的css文件变成了我们现在的scss文件
点击scss文件，会跳到source里面的scss源文件，现在可以在里面进行修改，修改完成后可以右键选择save或save as命令，然后替换我们本地的scss源文件，刷新chrome就可以看到变化（注意，解析样式需要一定时间）。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。
火狐浏览器调试
debug-info调试
firefox可以安装插件FireSass使用debug-info来调试。
开启--debug-info编译，f12打开firebug，就可以看到原先右边的css文件变成了我们现在的scss文件
sourcemap调试
firefox 29 将会开始支持
sourcemap，注意是火狐自带的调试功能，而不是firebug。开启
--sourcemap编译，右键“查看元素”采用火狐自带的调试功能，打开调试面板，在样式上右键选择“显示原始来源”。点击scss文件，这样就跳到了scss文件。如下图：
然后就可以进行我们的修改了，修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里，同谷歌一样直接覆盖到我们本地的源文件就ok了。
sass库：
1.sassCore
sassCore分核心文件和扩展文件两种。其中核心文件提供一些基础的样式和@mixin，%等方便调用；而扩展文件则提供一些模块的样式，如form，table等
核心文件调用：
1.除了提供基础功能外，会产生reset样式 @import "d:/sassCore/base"
2.不产生任何样式，只提供功能的调用 @import “d:/sassCore/function”
扩展文件调用：
按需调用： @import "d:/sassCore/ext/table"
注：因为sass不能导入在线sass文件，而sassCore也没有提供安装版的使用，所以默认统一放在D盘进行调用
特点：
1.sassCore涵盖范围广。核心文件有setting，css3，media-queries，mixin，grid，reset；扩展文件有animate，font-face，btn，message，form，table，helps，typography；除此之外还有两个集合文件function和base。
2.sassCore对兼容采用了开关控制机制。如对是否支持ie6/7可以通过设置为true或false以生成对应的代码。
3.sassCore严格控制样式冗余累赘。使用开关变量做到需要什么样式就加载什么样式，按需开启，避免样式冗余累赘。
4.sassCore设计了两种调用方式，一种是只调用功能，不产生任何多余的css代码；另一种是包含了些重置样式。为团队的合作开发提供了良好的解决方案。
5.- sassCore借鉴优秀的作品，根据实战创造新的方法，紧跟前沿，每一个文件都是经过深思熟虑，几易其稿，在实用和卓越上狠下功夫。
命名规则：
变量以及@function采用驼峰式写法@mixin %采用中划线
文件简述：
sassCore包括两个集合文件（base，function）和两个文件夹（core，ext）。其中core文件夹中为核心基础文件，包括setting，css3，media-queries，mixin，grid，reset；而ext文件夹中是一些扩展文件，包括animate，font-face，btn，message，form，table，typography，helper。
两个集合文件（base，function）导入的都是core中的文件，区别在于base除了提供基本功能之外还会生成一份reset样式，而function则只提供基本功能。至于ext中的文件则属于额外的一些模块扩展，可根据需求导入。
core文件
setting
负责基础变量的文件，如常用的颜色，字体等变量。
css3
负责css3属性前缀的文件。
media-queries
负责响应式宽度判断的文件。主要是对响应式布局的一些宽度判断，来自paranoida的sass-mediaqueries。
mixin
负责功能方面的文件。这里大概分成三个部分，一个是混合部分即mixin，一个是placeholder选择器部分即%，最后就是我们的function函数部分。我们常用的include及extend当然就是来自于这里了。
grid
负责网格系统的文件。默认为固定宽度布局（1000px），可以通过设置$gridPercentSwitch为true来切换为流体布局，也可以通过设置$gridSpanSwitch为true或false来控制是否输出各个网格的class。
reset
在normalize的基础上，根据目前我们大家的使用习惯进行了一些归零行动，及设置文字字体颜色，是否输出打印样式。
ext文件
animate
将animate.css转成scss版本，默认不输出任何样式，需要什么动画先导入对应的动画文件，然后include调用即可。
font-face
来自Font Awesome的字体图标，可以根据自己的需求使用其他字体图标，默认不输出任何class，可根据实际需求输出其中的某些icon。参考了大漠的font-awesome模块
btn
为按钮设计的文件，里面定义了一系列mixin，可用于自定义按钮，默认生成两种按钮
message
交互提示信息，包括警告，错误，成功，提示四种状态的样式
form
提供了表单元素样式及几种常见的表单组合样式，可通过变量控制输出
table
提供几种常用的表格样式，可通过变量来控制输出
helper
常用的几个class，可以根据自己的喜好定义。
typography
负责文字排版的文件。这里主要考虑到文章详细页和其他页面的一些不同情况而给详细页加入了article这个class，里面的一些元素如ul，li，p给予一定的样式，而不是清零。
2.compass
3.bourbon
上一篇： 怎么使用jQuery动态修改超链接
下一篇： JavaScript事件处理程序详解