<span style="color: #800000;">//sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; body </span>{<span style="color: #ff0000;"> font-family</span>:<span style="color: #0000ff;"> $fontStack</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> $primaryColor</span>; }<span style="color: #800000;"> //css style body </span>{<span style="color: #ff0000;"> font-family</span>:<span style="color: #0000ff;"> Helvetica, sans-serif</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #333</span>; }
<span style="color: #800000;">//sass style nav </span>{<span style="color: #ff0000;"> ul { margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;"> li </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>; }<span style="color: #800000;"> a </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;"> } //css style nav ul </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;"> nav li </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>; }<span style="color: #800000;"> nav a </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>; }
@import
<span style="color: #800000;">//sass style //----------------------------------- @mixin box-sizing ($sizing) </span>{<span style="color: #ff0000;"> -webkit-box-sizing</span>:<span style="color: #0000ff;">$sizing</span>;<span style="color: #ff0000;"> -moz-box-sizing</span>:<span style="color: #0000ff;">$sizing</span>;<span style="color: #ff0000;"> box-sizing</span>:<span style="color: #0000ff;">$sizing</span>; }<span style="color: #800000;"> .box-border</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">1px solid #ccc</span>;<span style="color: #ff0000;"> @include box-sizing(border-box); </span>}<span style="color: #800000;"> //css style //----------------------------------- .box-border </span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;"> -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;"> -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;"> box-sizing</span>:<span style="color: #0000ff;"> border-box</span>; }
@extend
来实现代码组合声明,使代码更加优越简洁。<span style="color: #800000;">//sass style .message </span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #333</span>; }<span style="color: #800000;"> .success </span>{<span style="color: #ff0000;"> @extend .message; border-color</span>:<span style="color: #0000ff;"> green</span>; }<span style="color: #800000;"> .error </span>{<span style="color: #ff0000;"> @extend .message; border-color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;"> .warning </span>{<span style="color: #ff0000;"> @extend .message; border-color</span>:<span style="color: #0000ff;"> yellow</span>; }<span style="color: #800000;"> //css style .message, .success, .error, .warning </span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #cccccc</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #333</span>; }<span style="color: #800000;"> .success </span>{<span style="color: #ff0000;"> border-color</span>:<span style="color: #0000ff;"> green</span>; }<span style="color: #800000;"> .error </span>{<span style="color: #ff0000;"> border-color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;"> .warning </span>{<span style="color: #ff0000;"> border-color</span>:<span style="color: #0000ff;"> yellow</span>; }<span style="color: #800000;"> <br></span>
<span style="color: #800000;">//sass style $linkColor: #08c; a </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">$linkColor</span>;<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">hover{ color:darken($linkColor,10%)</span>; }<span style="color: #800000;"> } //css style a </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #0088cc</span>; }<span style="color: #800000;"> a:hover </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #006699</span>; }
运算
sass可进行简单的加减乘除运算等
<span style="color: #800000;">//sass style .container </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;"> article[role="main"] </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 600px / 960px * 100%</span>; }<span style="color: #800000;"> aside[role="complimentary"] </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 300px / 960px * 100%</span>; }<span style="color: #800000;"> //css style .container </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;"> article[role="main"] </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 62.5%</span>; }<span style="color: #800000;"> aside[role="complimentary"] </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 31.25%</span>; }
@import
)规则和CSS的有所不同,编译时会将@import
的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'
,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import
方式存在。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"。/* */
,另一种则是//
双斜杆形式的单行注释,不过这种单行注释不会被转译出来。<span style="color: #800000;">//sass style $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body</span>{<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> $baseLineHeight</span>; }<span style="color: #800000;"> //css style body</span>{<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;">2</span>; }
#{$variables}
形式使用。<span style="color: #800000;">//sass style $borderDirection: top !default; $baseFontSize: 12px !default; $baseLineHeight: 1.5 !default; //应用于class和属性 .border-#</span>{<span style="color: #ff0000;">$borderDirection</span>}{<span style="color: #ff0000;"> border-#{$borderDirection</span>}<span style="color: #800000;">:1px solid #ccc; } //应用于复杂的属性值 body</span>{<span style="color: #ff0000;"> font</span>:<span style="color: #0000ff;">#{$baseFontSize</span>}<span style="color: #800000;">/#</span>{<span style="color: #ff0000;">$baseLineHeight</span>}<span style="color: #800000;">; } //css style .border-top</span>{<span style="color: #ff0000;"> border-top</span>:<span style="color: #0000ff;">1px solid #ccc</span>; }<span style="color: #800000;"> body </span>{<span style="color: #ff0000;"> font</span>:<span style="color: #0000ff;"> 12px/1.5</span>; }
nth($var,$index)
取值。<span style="color: #800000;">//list定义 //一维数据 $px: 5px 10px 20px 30px; //二维数据,相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px); //使用 //sass style $linkColor: #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值 a</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">nth($linkColor,1)</span>;<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">hover{ color:nth($linkColor,2)</span>; }<span style="color: #800000;"> } //css style a</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#08c</span>; }<span style="color: #800000;"> a:hover</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#333</span>; }
$map: (key1: value1, key2: value2, key3: value3);
。可通过map-get($map,$key)
取值, 关于map数据还有很多其他函数如map-merge($map1,$map2)
,map-keys($map)
,map-values($map)
等<span style="color: #800000;">//sass style $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings </span>{<span style="color: #ff0000;"> #{$header</span>} {<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> $size</span>; }<span style="color: #800000;"> } //css style h1 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 2em</span>; }<span style="color: #800000;"> h2 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 1.5em</span>; }<span style="color: #800000;"> h3 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 1.2em</span>; }
<span style="color: #800000;">//sass style $fontSize: 12px; body</span>{<span style="color: #ff0000;"> $fontSize</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">$fontSize</span>; }<span style="color: #800000;"> p</span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">$fontSize</span>; }<span style="color: #800000;"> //css style body</span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">14px</span>; }<span style="color: #800000;"> p</span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">14px</span>; }
!global
之后才会成为全局变量。所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。
&
表示父元素选择器<span style="color: #800000;">//sass style #top_nav</span>{<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> text-transform</span>:<span style="color: #0000ff;"> capitalize</span>;<span style="color: #ff0000;"> li{ float</span>:<span style="color: #0000ff;">left</span>; }<span style="color: #800000;"> a</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">hover{ color:#ddd</span>; }<span style="color: #800000;"> } } //css style #top_nav</span>{<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> text-transform</span>:<span style="color: #0000ff;"> capitalize</span>; }<span style="color: #800000;"> #top_nav li</span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;">left</span>; }<span style="color: #800000;"> #top_nav a</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #fff</span>; }<span style="color: #800000;"> #top_nav a:hover</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#ddd</span>; }
<span style="color: #800000;">//sass style .fakeshadow </span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> { style: solid</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> { width: 4px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #888</span>; }<span style="color: #800000;"> right: </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #ccc</span>; }<span style="color: #800000;"> } } //css style .fakeshadow </span>{<span style="color: #ff0000;"> border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;"> border-left-width</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;"> border-left-color</span>:<span style="color: #0000ff;"> #888</span>;<span style="color: #ff0000;"> border-right-width</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;"> border-right-color</span>:<span style="color: #0000ff;"> #ccc</span>; }
<span style="color: #800000;">//sass style //没有跳出 .parent-1 </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#f00</span>;<span style="color: #ff0000;"> .child { width</span>:<span style="color: #0000ff;">100px</span>; }<span style="color: #800000;"> } //单个选择器跳出 .parent-2 </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#f00</span>;<span style="color: #ff0000;"> @at-root .child { width</span>:<span style="color: #0000ff;">200px</span>; }<span style="color: #800000;"> } //多个选择器跳出 .parent-3 </span>{<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;">#f00</span>;<span style="color: #ff0000;"> @at-root { .child1 { width</span>:<span style="color: #0000ff;">300px</span>; }<span style="color: #800000;"> .child2 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">400px</span>; }<span style="color: #800000;"> } } //css style .parent-1 </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #f00</span>; }<span style="color: #800000;"> .parent-1 .child </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>; }<span style="color: #800000;"> .parent-2 </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #f00</span>; }<span style="color: #800000;"> .child </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 200px</span>; }<span style="color: #800000;"> .parent-3 </span>{<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> #f00</span>; }<span style="color: #800000;"> .child1 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 300px</span>; }<span style="color: #800000;"> .child2 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 400px</span>; }
<span style="color: #800000;">//sass style //跳出父级元素嵌套 @media print </span>{<span style="color: #ff0000;"> .parent1{ color</span>:<span style="color: #0000ff;">#f00</span>;<span style="color: #ff0000;"> @at-root .child1 { width</span>:<span style="color: #0000ff;">200px</span>; }<span style="color: #800000;"> } } //跳出media嵌套,父级有效 @media print </span>{<span style="color: #ff0000;"> .parent2{ color</span>:<span style="color: #0000ff;">#f00</span>;<span style="color: #ff0000;"> @at-root (without</span>:<span style="color: #0000ff;"> media) { .child2 { width:200px</span>; }<span style="color: #800000;"> } } } //跳出media和父级 @media print </span>{<span style="color: #ff0000;"> .parent3{ color</span>:<span style="color: #0000ff;">#f00</span>;<span style="color: #ff0000;"> @at-root (without</span>:<span style="color: #0000ff;"> all) { .child3 { width:200px</span>; }<span style="color: #800000;"> } } } //css style @media print </span>{<span style="color: #ff0000;"> .parent1 { color</span>:<span style="color: #0000ff;"> #f00</span>; }<span style="color: #800000;"> .child1 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 200px</span>; }<span style="color: #800000;"> } @media print </span>{<span style="color: #ff0000;"> .parent2 { color</span>:<span style="color: #0000ff;"> #f00</span>; }<span style="color: #800000;"> } .parent2 .child2 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 200px</span>; }<span style="color: #800000;"> @media print </span>{<span style="color: #ff0000;"> .parent3 { color</span>:<span style="color: #0000ff;"> #f00</span>; }<span style="color: #800000;"> } .child3 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 200px</span>; }<span style="color: #800000;"> @at-root与&配合使用: //sass style .child</span>{<span style="color: #ff0000;"> @at-root .parent &{ color</span>:<span style="color: #0000ff;">#f00</span>; }<span style="color: #800000;"> } //css style .parent .child </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #f00</span>; }
<span style="color: #800000;">//sass style .demo </span>{<span style="color: #ff0000;"> ... animation</span>:<span style="color: #0000ff;"> motion 3s infinite</span>;<span style="color: #ff0000;"> @at-root { @keyframes motion { ... </span>}<span style="color: #800000;"> } } //css style .demo </span>{<span style="color: #ff0000;"> ... animation</span>:<span style="color: #0000ff;"> motion 3s infinite</span>; }<span style="color: #800000;"> @keyframes motion </span>{<span style="color: #ff0000;"> ... </span>}
@mixin
声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin
通过@include
来调用。<span style="color: #800000;">//sass style @mixin center-block </span>{<span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;">auto</span>; }<span style="color: #800000;"> .demo</span>{<span style="color: #ff0000;"> @include center-block; </span>}<span style="color: #800000;"> //css style .demo</span>{<span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;">auto</span>; }
<span style="color: #800000;">//sass style @mixin opacity($opacity:50) </span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> $opacity / 100</span>;<span style="color: #ff0000;"> filter</span>:<span style="color: #0000ff;"> alpha(opacity=$opacity)</span>; }<span style="color: #800000;"> //css style .opacity</span>{<span style="color: #ff0000;"> @include opacity; //参数使用默认值 </span>}<span style="color: #800000;"> .opacity-80</span>{<span style="color: #ff0000;"> @include opacity(80); //传递参数 </span>}
@include
传入参数的个数小于@mixin
定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错。除此之外还可以选择性的传入参数,使用参数名与值同时传入。<span style="color: #800000;">//sass style @mixin horizontal-line($border:1px dashed #ccc, $padding:10px)</span>{<span style="color: #ff0000;"> border-bottom</span>:<span style="color: #0000ff;">$border</span>;<span style="color: #ff0000;"> padding-top</span>:<span style="color: #0000ff;">$padding</span>;<span style="color: #ff0000;"> padding-bottom</span>:<span style="color: #0000ff;">$padding</span>; }<span style="color: #800000;"> .imgtext-h li</span>{<span style="color: #ff0000;"> @include horizontal-line(1px solid #ccc); </span>}<span style="color: #800000;"> .imgtext-h--product li</span>{<span style="color: #ff0000;"> @include horizontal-line($padding</span>:<span style="color: #0000ff;">15px)</span>; }<span style="color: #800000;"> //css style .imgtext-h li </span>{<span style="color: #ff0000;"> border-bottom</span>:<span style="color: #0000ff;"> 1px solid #cccccc</span>;<span style="color: #ff0000;"> padding-top</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;"> padding-bottom</span>:<span style="color: #0000ff;"> 10px</span>; }<span style="color: #800000;"> .imgtext-h--product li </span>{<span style="color: #ff0000;"> border-bottom</span>:<span style="color: #0000ff;"> 1px dashed #cccccc</span>;<span style="color: #ff0000;"> padding-top</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;"> padding-bottom</span>:<span style="color: #0000ff;"> 15px</span>; }
$variables...
。<span style="color: #800000;">//sass style //box-shadow可以有多组值,所以在变量参数后面添加... @mixin box-shadow($shadow...) </span>{<span style="color: #ff0000;"> -webkit-box-shadow</span>:<span style="color: #0000ff;">$shadow</span>;<span style="color: #ff0000;"> box-shadow</span>:<span style="color: #0000ff;">$shadow</span>; }<span style="color: #800000;"> .box</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">1px solid #ccc</span>;<span style="color: #ff0000;"> @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)); </span>}<span style="color: #800000;"> //css style .box</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">1px solid #ccc</span>;<span style="color: #ff0000;"> -webkit-box-shadow</span>:<span style="color: #0000ff;">0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)</span>;<span style="color: #ff0000;"> box-shadow</span>:<span style="color: #0000ff;">0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)</span>; }
@content
在sass3.2.0中引入,可以用来解决css3的@media等带来的问题。它可以使@mixin
接受一整块样式,接受的样式从@content开始。<span style="color: #800000;">//sass style @mixin max-screen($res)</span>{<span style="color: #ff0000;"> @media only screen and ( max-width</span>:<span style="color: #0000ff;"> $res ) { @content</span>; }<span style="color: #800000;"> } @include max-screen(480px) </span>{<span style="color: #ff0000;"> body { color</span>:<span style="color: #0000ff;"> red </span>}<span style="color: #800000;"> } //css style @media only screen and (max-width: 480px) </span>{<span style="color: #ff0000;"> body { color</span>:<span style="color: #0000ff;"> red </span>}<span style="color: #800000;"> } </span>
@mixin
通过@include
调用后解析出来的样式是以拷贝形式存在的,而下面的继承则是以联合声明的方式存在的,所以从3.2.0版本以后,建议传递参数的用@mixin
,而非传递参数类的使用下面的继承%
。@extend
,后面紧跟需要继承的选择器<span style="color: #800000;">//sass style h1</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 4px solid #ff9aa9</span>; }<span style="color: #800000;"> .speaker</span>{<span style="color: #ff0000;"> @extend h1; border-width</span>:<span style="color: #0000ff;"> 2px</span>; }<span style="color: #800000;"> //css style h1,.speaker</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 4px solid #ff9aa9</span>; }<span style="color: #800000;"> .speaker</span>{<span style="color: #ff0000;"> border-width</span>:<span style="color: #0000ff;"> 2px</span>; }
%
。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend
去继承相应的样式,都会解析出来所有的样式。占位选择器以%
标识定义,通过@extend
调用。<span style="color: #800000;">//sass style %ir</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;"> text-shadow</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;"> %clearfix</span>{<span style="color: #ff0000;"> @if $lte7 { *zoom</span>:<span style="color: #0000ff;"> 1</span>; }<span style="color: #800000;"> &:before, &:after </span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;"> font</span>:<span style="color: #0000ff;"> 0/0 a</span>; }<span style="color: #800000;"> &:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }<span style="color: #800000;"> } #header</span>{<span style="color: #ff0000;"> h1{ @extend %ir; width</span>:<span style="color: #0000ff;">300px</span>; }<span style="color: #800000;"> } .ir</span>{<span style="color: #ff0000;"> @extend %ir; </span>}<span style="color: #800000;"> //css style #header h1, .ir</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;"> text-shadow</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;"> #header h1</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">300px</span>; }
如上代码,定义了两个占位选择器%ir
和%clearfix
,其中%clearfix
这个没有调用,所以解析出来的css样式也就没有clearfix部分。占位选择器的出现,使css文件更加简练可控,没有多余。所以可以用其定义一些基础的样式文件,然后根据需要调用产生相应的css。
@media
中暂时不能@extend
@media
外的代码片段,以后将会可以。lighten($color,$amount)
和darken($color,$amount)
,它们的第一个参数都是颜色值,第二个参数都是百分比。<span style="color: #800000;">//sass style $baseFontSize: 10px !default; $gray: #ccc !defualt; // pixels to rems @function pxToRem($px) </span>{<span style="color: #ff0000;"> @return $px / $baseFontSize * 1rem; </span>}<span style="color: #800000;"> body</span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">$baseFontSize</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">lighten($gray,10%)</span>; }<span style="color: #800000;"> .test</span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">pxToRem(16px)</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">darken($gray,10%)</span>; }<span style="color: #800000;"> //css style body</span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">10px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#E6E6E6</span>; }<span style="color: #800000;"> .test</span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">1.6rem</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#B3B3B3</span>; }
<span style="color: #800000;">$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</span>
<span style="color: #800000;">//sass style $lte7: true; $type: monster; .ib</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;"> @if $lte7 { *display</span>:<span style="color: #0000ff;">inline</span>;<span style="color: #ff0000;"> *zoom</span>:<span style="color: #0000ff;">1</span>; }<span style="color: #800000;"> } p </span>{<span style="color: #ff0000;"> @if $type == ocean { color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> @else if $type == matador </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;"> @else if $type == monster </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> green</span>; }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> black</span>; }<span style="color: #800000;"> } //css style .ib</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;"> *display</span>:<span style="color: #0000ff;">inline</span>;<span style="color: #ff0000;"> *zoom</span>:<span style="color: #0000ff;">1</span>; }<span style="color: #800000;"> p </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> green</span>; }
if($condition, $if_true, $if_false)
。三个参数分别表示:条件,条件为真的值,条件为假的值<span style="color: #800000;">if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px<br></span>
for循环:
for循环有两种形式,分别为:@for $var from
<span style="color: #800000;">//sass style @for $i from 1 through 3 </span>{<span style="color: #ff0000;"> .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;"> } //css style .item-1 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em</span>; }<span style="color: #800000;"> .item-2 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 4em</span>; }<span style="color: #800000;"> .item-3 </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 6em</span>; }
@each $var in <list or map></list>
。其中$var
表示变量,而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。<span style="color: #800000;">//sass style $animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list </span>{<span style="color: #ff0000;"> .#{$animal</span>}<span style="color: #800000;">-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/#{$animal</span>}<span style="color: #800000;">.png'); } } //css style .puma-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/puma.png')</span>; }<span style="color: #800000;"> .sea-slug-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/sea-slug.png')</span>; }<span style="color: #800000;"> .egret-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/egret.png')</span>; }<span style="color: #800000;"> .salamander-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/salamander.png')</span>; }
<span style="color: #800000;">//sass style $animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move); @each $animal, $color, $cursor in $animal-data </span>{<span style="color: #ff0000;"> .#{$animal</span>}<span style="color: #800000;">-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/#{$animal</span>}<span style="color: #800000;">.png'); border: 2px solid $color; cursor: $cursor; } } //css style .puma-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/puma.png')</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 2px solid black</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> default</span>; }<span style="color: #800000;"> .sea-slug-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/sea-slug.png')</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 2px solid blue</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>; }<span style="color: #800000;"> .egret-icon </span>{<span style="color: #ff0000;"> background-image</span>:<span style="color: #0000ff;"> url('/images/egret.png')</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 2px solid white</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> move</span>; }
<span style="color: #800000;">//sass style $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings </span>{<span style="color: #ff0000;"> #{$header</span>} {<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> $size</span>; }<span style="color: #800000;"> } //css style h1 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 2em</span>; }<span style="color: #800000;"> h2 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 1.5em</span>; }<span style="color: #800000;"> h3 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 1.2em</span>; }
<span style="color: #800000;">// nested #main </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #000</span>; }<span style="color: #800000;"> #main p </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 10em</span>; }<span style="color: #800000;"> .huge </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 10em</span>;<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> underline</span>; }<span style="color: #800000;"> // expanded #main </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #000</span>; }<span style="color: #800000;"> #main p </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 10em</span>; }<span style="color: #800000;"> .huge </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 10em</span>;<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> underline</span>; }<span style="color: #800000;"> // compact #main </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #000</span>; }<span style="color: #800000;"> #main p </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 10em</span>; }<span style="color: #800000;"> .huge </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 10em</span>;<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> underline</span>; }<span style="color: #800000;"> // compressed #main</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">font-weight</span>:<span style="color: #0000ff;">bold</span>;<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;">underline</span>}
F12打开调试面板,点击调试面板右上角的齿轮图标打开设置,在general
选项中勾选Enable CSS source map
和 Auto-reload generated CSS
。
开启--sourcemap
编译,f12
打开调试面板,就可以看到原先右边的css文件变成了我们现在的scss文件
点击scss文件,会跳到source
里面的scss源文件,现在可以在里面进行修改,修改完成后可以右键选择save
或save as
命令,然后替换我们本地的scss源文件,刷新chrome就可以看到变化(注意,解析样式需要一定时间)。以后只要ctrl+s
保存修改就可以在浏览器中看到修改效果了。
firefox可以安装插件FireSass使用debug-info
来调试。
开启--debug-info
编译,f12
打开firebug,就可以看到原先右边的css文件变成了我们现在的scss文件
sourcemap
,注意是火狐自带的调试功能,而不是firebug。--sourcemap
编译,右键“查看元素”采用火狐自带的调试功能,打开调试面板,在样式上右键选择“显示原始来源”。点击scss文件,这样就跳到了scss文件。如下图:
然后就可以进行我们的修改了,修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里,同谷歌一样直接覆盖到我们本地的源文件就ok了。