当前位置:Gxlcms > html代码 > sass学习研究_html/css_WEB-ITnose

sass学习研究_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:28人阅读

这篇文章是算是前两天学习sass的一个摘要和总结吧,简单记载下。希望对大家有所帮助


对于什么是sass,我想现在大家可能都有所了解了。其实就是css的一种开发工具,或者也可以说是将css编程化。其实和less是有很大的相似点的。或者说几乎都是相同的。但是对于这两种的高级用法,其实个人更加的偏向于sass!



关于sass的安装以及编译之类的这个东西上网一查一大把的就不多说了

我这里是用koala编译的。




下面简单的总结下sass的几个特点吧。


1、变量:


sass中允许使用变量,在sass中变量都是以$开头的。


$blue:#249804;

div{

color:$blue;

}


如果需要将变量嵌入在字符串中则就必须写在#{}中


类似于我在汇联易中自定义的栅格宽度的sass写法:

@mixin colWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $value;

-moz-box-flex: 0;

-moz-flex: 0 0 $value;

-ms-flex: 0 0 $value;

flex: 0 0 $value;

}


$i:1;


@while $i<=100{

.col-#{$i}{

@include colWidth($i*1%);

$i:$i+1;

}

}


//这里用到的Mixin和循环后面会讲到。


变量非常的简单,基本也就这样。


2、计算功能


这个非常的简单,举个例子就可以了


在上面的例子中也用到了,比如$i*1%;

再比如:margin:(10px+2px);


3、嵌套


这里的嵌套给我的感觉就类似于dom树的树状结构似的。


很简单,举个例子就可以了

.hly{

.expense-type-icon-list {

box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, .26);

.scroll {

float: left;

.scroll-content-container {

width: 35em;

padding: 8px 10px;

float: left;

img {

float: left;

margin-left: 5px;

}

img:first-child {

margin-left: 0px;

}

}

}


}

}


对应的生成出来的css:


.hly .create-invoice .expense-type-icon-list {

box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, 0.26); }

.hly .create-invoice .expense-type-icon-list .scroll {

float: left; }

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container {

width: 35em;

padding: 8px 10px;

float: left; }

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img {

float: left;

margin-left: 5px; }

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img:first-child {

margin-left: 0px; }



4、继承

sass允许一个选择器去继承另一个选择器,比如现在有个class1,

.class1{

border:1px soild #ddd;

}


现在有class2要继承class1的属性,则用@extend命令

.class2{

@extend .class1;

font-size:1.5em;

}


5、Mixin

这个可以理解为宏定义,angularjs中的指令,在变量的举例中就有说到了。这里再具体的说下


这里我们通过一个mixin来定义一个代码块

还是拿上面的例子:

@mixin colWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $value;

-moz-box-flex: 0;

-moz-flex: 0 0 $value;

-ms-flex: 0 0 $value;

flex: 0 0 $value;

}

用@include来调用它。

div{

@include colWidth(30%);

}


看到这里大家可能会有个疑问,为什么这里的mixin中有个参数在里面?

其实这个也就是Mixin的强大之处了(当然,你也可以不指定)

当指定了以后,我们可以传入不同的值,当然也可以缺省,当缺省的时候就是默认的指,例如上面的例子就是20%


6、颜色函数

说实话这个我不是很懂,因为基本我觉得是用不到的。简单从网上找了些例子:

lighten(#cc3, 10%) // #d6d65c

  darken(#cc3, 10%) // #a3a329

  grayscale(#cc3) // #808080

  complement(#cc3) // #33c

大家这个也可以多查查。


7、插入文件

简单的一个命令@import

@import("path/fileName.scss");

如果是.css的文件

@import "fileName.css";


8、条件语句

从这里开始应该可以说是sass的一些高级的用法了吧


@if可以用来判断

div{

@if 1+2 ==3 {border:1px soild #ddd};

@if 3<2 {margin:0 auto};

}


当然,既然存在if,必然少不了else!用法如下:

@if lightness($color) > 30% {

    background-color: #000;

  } @else {

    background-color: #fff;

  }


9、循环语句

sass支持for循环,while循环以及each命令


for循环:

@for $i form 1 to 10{

.class-#{i}{

margin-left:#{i}px;

}

}


while循环(同样是汇联易中的例子):

@mixin colWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $value;

-moz-box-flex: 0;

-moz-flex: 0 0 $value;

-ms-flex: 0 0 $value;

flex: 0 0 $value;

}


$i:1;


@while $i<=100{

.col-#{$i}{

@include colWidth($i*1%);

$i:$i+1;

}

}


each例子:

@each $member in a, b, c, d {

   .#{$member} {

     background-image: url("/image/#{$member}.jpg");

   }

  }



10、自定义函数

当然也是有特殊符号的:@function @return


@function double($i){

@return $i*2;

}


div{

margin:double(2em);

}



最后说一句,在项目中尽量还是少用sass的高级用法,因为可能项目跑起来编译特别慢,甚至会卡在高级用法中编译不出sass别的样式


比如我自定的栅格用的Mixin,这个在项目能够很快被编译,但是配合了while循环就会卡死。后来我是引入koala编译出来的css文件引入到项目中的~

人气教程排行