前端菜鸟

Sass基础语法

Sass是CSS3语言的扩展,在CSS的基础之上添加了新特性和语法,能省事地写出更好的样式表。Sass引擎是基于Ruby的。

导入Sass文件:

@import "colors" //colors.scss

注释:

//这种注释不会出现在生成的css文件中
/*这种注释内容会出现在css文件中,当当出现在原生CSS不允许的未知,则这些注释会被抹掉*/

变量>>

-->变量声明 

//注意:变量中下划线和中划线表示同一个变量
$flower-color:#abcdef; //flower-color是一个变量,其值现在是#abcdef $basic-border:1px solid black; //任何可以用作CSS属性值的赋值都可以作为SASS的变量值 $basic-font:"MyriadPro"、Myriad、"helveticaNuue"、Helvetica;//也可以是逗号分割的多个属性值 //与CSS属性不同,变量可以在CSS会泽块定义之外使用。当变量定义在CSS规则块内,那么该变量只能在其子级规则块内使用。
$nav-color:#dadada; nav
{ $width:100px; width:$width; color:$nav-color; }

-->变量引用

凡是CSS属性的标准值可以存在的地方,变量就可以实用。

$flower-color:red; //变量声明
.flower{            //变量引用
      border:1px $flower-color solid;
}

嵌套规则>>

-->基本嵌套规则,和一些编程语言很类似很容易理解,群则选择器的嵌套也和CSS语法一样

//CSS 代码,经常重复写选择器
#content article h1{color:#333}
#contetn article p{margin-bottom:1.5em;}
#cojntent aside{background-color:#eee;}

//SASS代码,选择器嵌套
#content{
    article{
        h1{color:#333}
        p{margin-bottom:1.5em}
    }
    aside{background-color:#eee;}
}

-->父选择器的标识符&

article a{
    color:blue;
    &:hover{color:red}    //必须标识父选择器&,否则SASS无法正常工作
}

//CSS 代码
article a{color:blue}
article a:hover{color:red}

-->子组合选择器和同层组合选择器:> + ~

这些选择器必须配合其他选择器实用,以制定浏览器仅选择某种特定上下文中的元素。这些选择器可以应用带Sass的规则嵌套中。

article section{margin:5px;}
//用子组合选择器>选择一个元素的直接子元素
article>section{border:1px red solid}
//同层相邻组合选择器+选择元素紧跟着的元素
header + p {font-size:1.1em}
//同层全体组合选择齐齐~,选择跟在元素后的同层元素,不管他们之间间隔了多少其他元素
article ~ article {border:1px solid red;}

-->嵌套属性

除了选择器,属性也可以进行嵌套。

nav{
    border:1px solid #ccc{
        left:0px;
        right:0px;
    }
}

虽然属性和选择器嵌套可以大大减少便血量,但当样式表越来越大,这种写法很难保持结构清晰。而处理大量样式的唯一方法就是分拆成多个文件。

混合器>>

@mixin corners{       //用@mixin标识符定义
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -webkit-border-radius:5px;;
    -o-border-radius:5px;
    border-radius:5px;
}

.calamus{
    border:2px solid red;
    @include corners;       //用@include调用混合器中的所有样式
}

//混合器中不仅可以包含css规则还可以包含属性,也可以嵌套

//混合器可以传递参数
@maxin link-colors($normal,$hover){
    color:$normal;
    &:hover{color:$hover}
}

a{
    @include link-colors(blue,red);  //参数的传递
}

继承>>

通过 @extend实现

.error{
    border:1px solid red;
    color:red;
}
.seriousError{
    @extend .error;      //继承error的属性值
   width:300px;
}

 

(0)

本文由 Calamus 作者:calamus 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注