sass 入门教程

2016-12-17 12:03:55来源:oschina作者:conflicts人点击

1、引言

众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足,开发者们想到了编写一种对css进行预处理的“中间语言”,可以实现一些“编程”语言才有的功能,然后自动编译成css供浏览识别,这样既一定程度上弥补了css的不足,也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了


2、安装

sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。去官网下载Ruby并安装,安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量


使用淘宝RubyGems镜像安装 sass


$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
gem install compass
3、编译
sass test.scss test.css

SASS提供四个编译风格的选项


* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。

生产环境当中,一般使用最后一个选项。


sass --style compressed test.sass test.css

也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译


// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
4、嵌套

选择器嵌套


div {
  h1 {
    color:red;
  }
}

属性嵌套


div {
  h1 {
    background:{
color:red;
url(xxx.jpg);
position:0 0;
}
  }
}

引用父元素


a {
  &:hover {
color: #ffb3ff;
}
}5、变量

SASS允许使用变量,所有变量以$开头


$blue : #1875e7; 
div {
  color : $blue;
}

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中


$side : left;
.rounded {
  border-#{$side}-radius: 5px;
}6、mixin

使用@mixin命令,定义一个代码块


@mixin center($w:1180px){
width:$w;
margin:0 auto;
}

使用@include命令,调用这个mixin。


div {
  @include center;
}

传参


div {
  @include center(980px);
}7、继承

现有一个class1类


.class1 {
  border: 1px solid #ddd;
}

class2要继承class1,就要使用@extend命令


.class2 {
  @extend .class1;
  font-size:120%;
}
我们可以用占位符来写一些继承的样式(如“%one”),然后再通过@extend继承,这样就可以防止被渲染到CSS的规则集中%test{ color:red;
} .test1{ @extend %test; background:orange;
} .test2{ @extend %test; background:red;
}
/* 编译后 */
/* line 120, sass/_order.scss */ .test1, .test2 { color: red;
}
/* line 124, sass/_order.scss */ .test1 { background: orange;
}
/* line 129, sass/_order.scss */ .test2 { background: red;
}
8、插入文件

@import命令,用来插入外部文件。


@import "path/filename.scss";

如果插入的是.css文件,则等同于css的import命令


@import "foo.css";
9、条件语句

使用@if……@else……定义一个三角形箭头函数


/* 箭头
arrow(direction,size,color);
*/
@mixin arrow($direction,$size,$color) {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
border-width: $size;
cursor: pointer;
@if $direction == top {
border-style: dashed dashed solid dashed;
border-color: transparent transparent $color transparent;
border-top: none;
}
@else if $direction == bottom {
border-style: solid dashed dashed dashed;
border-color: $color transparent transparent transparent;
border-bottom: none;
}
@else if $direction == right {
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $color;
border-right: none;
}
@else if $direction == left {
border-style: dashed solid dashed dashed;
border-color: transparent $color transparent transparent;
border-left: none;
}
}10、循环

SASS支持for循环


@for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环


$i: 6;
  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

each命令,作用与for类似


@each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }
代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错解决办法

找到ruby的安装目录,里面也有sass模块,如这个路径:C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass


在这个文件里面engine.rb,添加一行代码:


Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。


最后在scss文件头部启用编码声明:


@charset "utf-8";//必须设置了这个才能编译有中文的注释

既然.scss能通过sass命令转译成.css样式,那么我们是否可以将.css转译成.scss呢?


事实是可以的,我们可以通过sass-convert命令:



$ sass-convert css/style.css style.scss



sass-convert除了可以将.css样式转译成.scss文件之外,还可以通过这个命令对.sass和.scss之间样式转译。

安装compass-sourcemaps


$ gem install compass-sourcemaps --pre

在Compass项目配置文件config.rb中增加enable_sourcemaps配置


# enable sourcemaps enable_sourcemaps = true sass_options = {:sourcemap => true}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台