sass(Syntactically Awesome StyleSheets)语法介绍
来源:互联网 发布:自考和网络教育的区别 编辑:程序博客网 时间:2024/06/15 23:53
sass(Syntactically Awesome StyleSheets)语法
sass是一种CSS的预编译工具。它允许我们使用变量,嵌套规则,混和编译,外部文件导入等等特性,其编译出来的文件CSS完全兼容。
文件名后缀(.sass & .scss)
sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的
css文件格式差不多,使用大括号和分号。.sass后缀的文件编写风格上更加类似于Ruby、Python等语言的代码书写风格,.scss
后缀的文件书写风格更加类似于CSS本身的书写风格。例如:
//文件后缀名为sass的语法body background: #eee font-size:12pxp background: #0982c1//文件后缀名为scss的语法body { background: #eee; font-size:12px;}p{ background: #0982c1;}
变量
sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。
sass中变量可以分为:普通变量、默认变量、特殊变量、多值变量(List和Map)和全局变量这几种。
普通变量
定义之后可以在全局范围内使用。此处使用的是.scss后缀名,如果使用.sass后缀名,下面的示例代码将抛出编译错误!!!
在.sass后缀文件中,变量声明将不需要结尾处的 “;” 。同时也不需要出现”{}”这样的类似于代码块的书写风格。
//sass style$fontSize: 12px;body{ font-size:$fontSize;}//css stylebody{ font-size:12px;}
默认变量
sass的默认变量仅需要在值后面加上!default即可。
//sass style$baseLineHeight:1.5 !default;body{ line-height: $baseLineHeight;}//css stylebody{ line-height:1.5;}
sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量 之前 重新声明下变量即可.
//sass style$baseLineHeight:2;$baseLineHeight:1.5 !default;body{ line-height: $baseLineHeight;}//css stylebody{ line-height:2;}
可以看出现在编译后的line-height为2,而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。
特殊变量
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$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
list数据可通过空格,逗号或小括号分隔多个值,可用nth(
[简要示例]
更过list方法可参考sass Functions(搜索List Functions即可)
使用示例:
//一维数据$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 stylea{ color:#08c;}a:hover{ color:#333;}
map
map数据以key和value成对出现,其中value又可以是list。格式为:
具体可参考sass Functions(搜索Map Functions即可)
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);//sass style$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings { #{$header} { font-size: $size; }}//css styleh1 { font-size: 2em;}h2 { font-size: 1.5em;}h3 { font-size: 1.2em;}
全局变量
在变量值后面加上!global即为全局变量。该特性是sass 3.4后的版本中正式应用,在此之前的版本中应用将编译出错。
出现全局变量的主要原因是为了解决:在选择器中声明的变量会覆盖外面全局声明的变量(也就是常说的sass没有局部变量)的问题。
//sass style$fontSize:12px;body{ $fontSize: 14px; font-size:$fontSize;}p{ font-size:$fontSize;}//css stylebody{ font-size:14px;}p{ font-size:14px;}
启用global之后的机制
//sass style$fontSize: 12px;$color: #333;body{ $fontSize: 14px; $color: #fff !global; font-size:$fontSize; color:$color;}p{ font-size:$fontSize; color:$color;}//css stylebody{ font-size:14px; color:#fff;}p{ font-size:12px; color:#fff;}
这里设置了两个变量,然后在body里面重新设置了下,有点不同的是对于$color变量,我们设置了!global。
通过编译后的css可以看到font-size取值不同,而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量,
而只有设置了!global之后才会成为全局变量。
注释
sass有两种注释方式,一种是标准的css注释方式/* */,另一种则是//双斜杆形式的单行注释,区别在于单行注释不会被转译出来。例如:
标准的css注释
/** css的标准注释*/body{ padding:5px;}
双斜杆单行注释
//双斜杠表示的单行注释body{ padding:5px; //5px}
导入(@import)
sass的导入(@import)规则和CSS的有所不同,sass在编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果我们在sass文件
中导入css文件如@import ‘reset.css’,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后得的css文件中,而是以@import方式存在。
在sass文件中所有的sass导入文件都可以忽略后缀名.scss。另外,如果基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,
可写成@import “mixin”,同时省略了文件的”_”前缀和”.scss”后缀。例如:
被导入sass文件a.scss:
body { background: #eee;}
需要导入样式的sass文件b.scss:
@import "reset.css";@import "a";p{ background: #0982c1;}
转译出来的b.css样式:
@import "reset.css";body { background: #eee;}p{ background: #0982c1;}
根据上面的演示示例可以看出,b.scss编译后,reset.css继续保持原生css的import方式,而a.scss则被整合到了b.scss文件中一起进行编译。
嵌套(Nesting)
sass的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。这里需要我们具备一定的CSS选择器的知识,更多内容请参看W3.org中的相关文档。
选择器嵌套
选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。在选择器嵌套中,可以使用&表示父元素选择器
代码示例:
//sass style#top_nav{ line-height: 40px; text-transform: capitalize; background-color:#333; li{ float:left; } a{ display: block; padding: 0 10px; color: #fff; &:hover{ color:#ddd; } }}//css style#top_nav{ line-height: 40px; text-transform: capitalize; background-color:#333;}#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.shadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } }}//css style.shadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc;}
混合(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 }}
@mixin通过@include调用后解析出来的样式是以拷贝形式存在的,而下面的继承则是以联合声明的方式存在的,
所以从3.2.0版本以后,建议传递参数的用@mixin,而非传递参数类的使用下面的继承%。
继承
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。
//sass styleh1{ border: 4px solid #ff9aa9;}.speaker{ @extend h1; border-width: 2px;}//css styleh1,.speaker{ border: 4px solid #ff9aa9;}.speaker{ border-width: 2px;}
占位选择器%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,
然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。
//sass style%ir{ color: transparent; text-shadow: none; background-color: transparent; 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; background-color: transparent; border: 0;}#header h1{ width:300px;}
如上代码,定义了两个占位选择器%ir和%clearfix,其中%clearfix这个没有调用,所以解析出来的css样式也就没有clearfix部分。占位选择器的出现,
使css文件更加简练可控,没有多余。所以可以用其定义一些基础的样式文件,然后根据需要调用产生相应的css。在@media中暂时不能@extend @media外的代码片段,以后将会可以。
函数
sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始。sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数
,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten(
//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 stylebody{ 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判断
@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(
if(true, 1px, 2px) => 1pxif(false, 1px, 2px) => 2px
for循环
for循环有两种形式,分别为:@for
$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。
//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
单个字段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 styleh1 { font-size: 2em;}h2 { font-size: 1.5em;}h3 { font-size: 1.2em;}
以上内容可能随着sass的不断演进而产生变化,如果学习与使用过程中出现问题,请访问sass官方网站进行修正:http://sass-lang.com
- sass(Syntactically Awesome StyleSheets)语法介绍
- SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程
- StyleSheets
- sass语法
- sass语法
- sass语法
- sass语法
- Sass语法
- SASS语法
- SASS安装 SASS编译 SASS基础语法
- 【Sass-02】Sass基础语法
- sass 语法简介
- sass语法整理
- SASS基本语法
- SASS语法学习
- SASS&Compass语法学习
- sass/scss语法@mixin
- sass 常用语法
- WebStorm 添加新项目------多项目共存
- Spring MVC中的视图解析ViewResolver
- 数据库中视图的作用
- java集合类详解
- Spring之——quartz集群的问题及解决方案(基于Spring4.0+quartz2.2.1的集群架构)
- sass(Syntactically Awesome StyleSheets)语法介绍
- Android RecycleView 使用技巧和心得
- shell编程之——cat /dev/null作用
- LSH: Locality Sensitive Hashing Theory
- happyNum的判断
- UEFI启动是什么意思 UEFI启动对比Bios启动优势在哪里
- linux下的时间操作
- SequenceFile 读写操作
- Thinkphp PHPEXCEL导入时间格式的问题