您当前位置：首页 > web前端 > htmlcss > 使用 sass/scss 编写CSS 快速上手

使用 sass/scss 编写CSS 快速上手

来源：程序员人生发布时间：2015-04-23 08:39:07 阅读次数：4331次

文章作者：松阳

本文出自阿修罗道，制止用于商业用处，转载请注明出处。

原文链接：http://blog.csdn.net/fansongy/article/details/44964187

Why Scss

CSS不是1种编程语言，它只是个配置文件，并没有生命。但我等大程序怎样能容忍自己写出来的东西不能动态变化，不能封装继承，不能xxoo呢，因而就有了css预处理的概念。即，写是1套，用是1套。Scss是css预处理的1个选择，它依托于Ruby，算是逼格比较高的。类似的还有Less等，语言优劣之争意义不大，用好1个其他也是大同小异。

安装

Mac上自带Ruby，直接运行：

gem install sass

安装对应模块，然后可使用：

sass --watch style.scss:style.css

命令来监视style.scss，当它有更改时，会自动编译成style.css。

友谊提示：我运行gem时完全不动，还以为是掉网了。后来听说是我大GFW威武，可以将源更改成x宝的服务器来解决：

$ gem sources -l $ gem sources --remove https://rubygems.org/ $ gem sources -a http://ruby.taobao.org/ $ gem sources -l //然后我顺手更新了1下Ruby的版本 $ sudo gem update --system

经过上面的折腾，顺利安装sass

经常使用语法

变量

//定义 $magin : 30px; //px $blue : #1875e7; //color $side : left; //str Usage: boder-#{$side}-radius

所有的数字类型的变量都可以进行相应的计算。

嵌套

nav { ul {...} border : { //注意冒号相当于树形属性会编译成 border-color:red color : red; } a { &:hover { color :$blue;} //&表示援用上层会编译成 a:hover{...} } }

注释

标准的CSS注释 /* comment */ ，会保存到编译后的文件。

单行注释 // comment，只保存在SASS源文件中，编译后被省略。

在/*后面加1个感叹号，表示这是"重要注释"。即便是紧缩模式编译，也会保存这行注释，通常可以用于声明版权信息。

继承

使用@extend可以继承相应的css:

.class1 { border:1px solid #ddd; } .class2 { @extend .class1; border-color: green; }

写的时候要注意顺序，编译时，css是不会调顺序的，谁先谁后得想好了。

Mixin

这个是1个函数与宏的私生子。实现像函数，使用像宏。关键词为@mixin和@include

@mixin left($color, $value:10px) { color:$color; margin-left:$value; } .mydiv { @include left($blue,15px); }

色彩处理函数

lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c $linkColor: #08c; a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); } }

用这个方法就可以制作1个链接变灰的效果

引入文件

@import "style2.css";

逻辑编译

想要真实的动起来，就得有判断啦，循环啦常规流程函数。

@if可1个条件单独使用，也能够和@else结合多条件使用

$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }

for循环有两种情势，分别为：@for $var from <start> through <end> 和 @for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区分是关键字through表示包括end这个数，而to则不包括end这个数。

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

each语法为:@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。

$animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings { #{$header} { font-size: $size; } }