码迷,mamicode.com
首页 > 其他好文 > 详细

sass-基础

时间:2017-03-22 12:54:17      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:默认值   default   使用   code   mixin   imp   ber   1.5   生成   

1:导入:

sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件。

但是如果你在sass文件中导入css文件如@import ‘reset.css‘,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"

 

例子:

 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;} 
 

2:注释

标准的css注释

/*
*我是css的标准注释
*设置body内距
*/
body{
  padding:5px;
} 

双斜杆单行注释

单行注释跟JavaScript语言中的注释一样,使用又斜杠(//),但单行注释不会输入到CSS中。

//我是双斜杠表示的单行注释
//设置body内距
body{
  padding:5px; //5px
} 

3:变量

sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。

 

 

3.1普通变量

定义之后可以在全局范围内使用。

$fontSize: 12px;

body{ font-size:$fontSize; } ==》 body{font-size:12px}

 

 

3.2默认变量

sass的默认变量仅需要在值后面加上!default即可。

$baseLineHeight: 1.5 !default;

body{ line-height: $baseLineHeight; }  ==》 body{ line-height:1.5; }

 

sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可

$baseLineHeight: 2;

$baseLineHeight: 1.5 !default;

body{ line-height: $baseLineHeight; }  ==》 body{ line-height:2; }

 

 

3.3特殊变量

一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

$borderDirection: top !default;

$baseFontSize: 12px !default;

$baseLineHeight: 1.5 !default;

//应用于class和属性

.border-#{$borderDirection}{

  border-#{$borderDirection}:1px solid #ccc;

}   ==》 .border-top{ border-top:1px solid #ccc; }

//应用于复杂的属性值

body{

  font:#{$baseFontSize}/#{$baseLineHeight};

}       ==》  body { font: 12px/1.5; }



3.4多值变量

 



sass-基础

标签:默认值   default   使用   code   mixin   imp   ber   1.5   生成   

原文地址:http://www.cnblogs.com/vs1435/p/6599074.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!