欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

sass学习研究_html/css_WEB-ITnose

程序员文章站 2022-06-09 10:05:56
...
这篇文章是算是前两天学习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

.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

}


当然,既然存在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

.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文件引入到项目中的~

相关标签: sass学习研究