CSS编程框架 - SASS之旅

2018-06-27 09:08:02来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

CSS

开发网页样式,它不是一种编程语言,没法用它编程。这对程序员来说是很痛苦的,毫无语言规范可言,

借用大牛阮一峰的说法就是:CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。

SASS

SASS是一种专门为CSS而服务的编程语言,是CSS的开发工具,通过编程语言进行网页样式设计,然后再编译成正常的CSS文件。

提供了许多便利的写法,可以将CSS代码模块化,分而治之。更好的CSS编码体验。配合gulp,webpack的自动化构建工具来做编译和文件合并。大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

安装与配置

step1:安装Ruby

SASS是依赖于Ruby语言环境的,必须先安装Ruby环境

在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境。

step2: 通过ruby命令 gem安装sass

安装完ruby之后,在cmd命令行中执行,如下图打开

淘宝RubyGems镜像安装 sass

1 gem sources -a http://gems.ruby-china.org
1 gem sources -l

安装命令

1 gem install sass

升级sass版本的命令行为

1 gem update sass

SASS编译

SASS编译的方式有多种:

1.通过gulp进行集成编译 /kaola(本文不做说明)

2.通过命令行的方式进行编译(本文不做详解)

sass scss目录地址输出目录地址

sass scss/main.scss:style/main.css

SASS命令行工具可以对目录进行自动监视,这样我们的目录下的文件发生了变化,SASS帮助我们自动编译,

sass scss/main.scss的SASS源码编译到style/main.css文件中去。

sass --watch 监视的目录地址:自动编译的目录地址

通过--watch命令让sass工具自动监视目录,并自动进行编译

sass --watch watchdir:outputdir --style nested|compact|compressed|expended

通过 --style nested(嵌套-默认)|compact(紧促型)|compressed(压缩)|expended(扩展)命令,可以为sass生成css样式指定生成的格式

SASS提供四种编译格式的选项

nested:嵌套缩进的css代码,它是默认值。

expanded:没有缩进的、扩展的css代码。

compact:简洁格式的css代码。

compressed:压缩后的css代码。

 

3.通过webstorm开发工具进行编译

setp1:配置环境    

 Webstorm -> File -> Setting -> Tool -> File Watchers -> 右侧“+” -> SCSS  ->ok

setp2:新建一个SCSS文件

结果如下:SCSS文件自动生成CSS文件和MAP关联文件

SASS语法结构

1.嵌套语法使用定义变量
$+变量名 : 值

1 $color : #ffff ;
2 $border : 1px solid red(多值);

2.嵌套语法使用
使用嵌套语法的好处,我们可以去掉样式里面的公共重复的部份,在使用嵌套语法时,

如果使用:hover这种伪类选择器时,嵌套语法会保留空格,我们为元素定义伪类是不能在元素和伪类之间有空格。(ie: a:hover)。

& : 用于引用父类名称 (如: & &-title{} => .nav .nav-title {} )

这个时候我们就必须使用一个符号 "&:hover" 的方式,直接使用父类名称,不保留空格。可以在属性中使用嵌套:

 1 .circle {
 2   background-color: red;
 3   background-origin: border-box;
 4   background-repeat: no-repeat;
 5   background-size: cover;
 6 }
 7 .circle2 {
 8   background :{ //注意需要添加 ":" color: #000;
 9     origin: border-box;
10     repeat: no-repeat;
11     size: cover;
12    }
13 }

3.@mixin语法
mixin 是一种预先定义好的样式块,我们可以在其它的任何地方重复使用这个样式块。
语法结构:

1 @mixin 名称 ($参数..,$参数){
2   .......
3 }
4 //使用@include进行mixin的调用
5 @include 名称 ($参数,... ) {
6   .......
7 }

4.@extend 继承语法
我们通过继承来减少重复的定义

1 .mm {
2   background-color: red;
3     a {
4     text-align: center;
5     }
6 }
7 .mm2 {
8    @extend .mm; background-origin: border-box;
9 }

当子类从父类继承后,子类可以继承父类相关的引用 ie: a的嵌套
5.占位符 %placeholder
 

 1 %icon {
 2    transition: background-color ease .2s;
 3    margin: 0 .5em;
 4  }
 5 .error-icon {
 6   @extend %icon;
 7    /*错误图标指定的样式... */
 8 }
 9 .info-icon { @extend %icon;
10   /* 信息图标指定的样式... */
11 }

6.@import 引入partial样式语法

SASS扩展了@import的功能,

SASS使我们可以在一个CSS文件里面可以引入多个文件,并且编译成一个文件;

因些我们就可以把一个大的css文件,

分为多个 partials (partials 需要以下划线开头 ie: _header.scss),

引入时,我们只需要在文件的头部添加

1 @import "header"

这个时候,header.scss的下划线和扩展名都不需要添加了!@import "header";
7.Interpolation 把一个值插入到别一个值中
#{$变量名} : 用于引用定义的字符串

1 $version:"0.0.1";
2 /* hello test comments #{$version} */
3 $nns : "txt";
4 .nav-#{$nns} {
5   background-size: cover;
6 }

8.SASS 控制语名

 1 $theme :"ddd";
 2 .testif {
 3   @if($theme == light) {
 4     background-color: lightblue;
 5     } @else if($theme == red){
 6     background-color: red;
 7     } @else {
 8     background-color: black;
 9    }
10 }
11 @for $i from 1 through 5 {
12     .col-#{$i} {
13     width:10% *$i;
14   }
15 }
16 @each $var in <list/map>
17 $list: zhangsan lisi wangwu; $map:(red:#dddd) -> map-get($map,key)
18 @each $name in $list {
19   .photo-#{$name}{
20     background: url("#{$name}.jpg");
21   }
22 }

9.SASS 自定义函数

 1 $ccs:(light:#ffffff,dark:#000000); //定义function
 2 @function getColor($key){
 3   @return map_get($ccs,$key);
 4 }
 5 @mixin aa(){ //调用@function
 6   color: getColor(light);
 7 }
 8 //使用mixin
 9 .testff {
10   @include aa()
11 }

敬请留言指正补充交流!!

(未完待续~~)

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:H5与CS3权威下.19 选择器(2)结构性伪类选择器

下一篇:jquery插件开发通用框架