SASS使用总结 - Lz_Tiramisu
//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 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; }
@import
//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; }
@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 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%; }
@import
)规则和CSS的有所不同,编译时会将@import
的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'
,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import
方式存在。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"。/* */
,另一种则是//
双斜杆形式的单行注释,不过这种单行注释不会被转译出来。//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; }
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: (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; }
//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
之后才会成为全局变量。所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了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; }
//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; }
//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; }
//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; }
//sass style .demo { ... animation: motion 3s infinite; @at-root { @keyframes motion { ... } } } //css style .demo { ... animation: motion 3s infinite; } @keyframes motion { ... }
@mixin
声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin
通过@include
来调用。//sass style @mixin center-block { margin-left:auto; margin-right:auto; } .demo{ @include center-block; } //css style .demo{ margin-left:auto; margin-right:auto; }
//sass style @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity); } //css style .opacity{ @include opacity; //参数使用默认值 } .opacity-80{ @include opacity(80); //传递参数 }
@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; }
$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
在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 } }
@mixin
通过@include
调用后解析出来的样式是以拷贝形式存在的,而下面的继承则是以联合声明的方式存在的,所以从3.2.0版本以后,建议传递参数的用@mixin
,而非传递参数类的使用下面的继承%
。@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; }
%
。这种选择器的优势在于:如果不调用则不会有任何多余的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。
@media
中暂时不能@extend
@media
外的代码片段,以后将会可以。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; }
$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
//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 $var in
。其中$var
表示变量,而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。//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'); }
//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; }
//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; }
// 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}
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调试
sourcemap
,注意是火狐自带的调试功能,而不是firebug。--sourcemap
编译,右键“查看元素”采用火狐自带的调试功能,打开调试面板,在样式上右键选择“显示原始来源”。点击scss文件,这样就跳到了scss文件。如下图:
然后就可以进行我们的修改了,修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里,同谷歌一样直接覆盖到我们本地的源文件就ok了。