SASS用法介绍

SASS用法介绍

SASS是一种CSS预处理器提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

安装SASS

SASS需要ruby支持，还需要gem，gem是ruby的包管理工具，ruby 1.9.1是自带gem的，如果是用1.8版本的话，需要另外安装。如果是windows的话，需要安装rubygems。

SASS一般会和Compass一起使用，这个也可以用gem来安装。

Ruby安装完之后，运行

gem install sass --pre
gem install compass --pre

就ok了。

注：如果按照compass的时候报错：

 ERROR:  Error installing compass:
            ERROR: Failed to build gem native extension.

            /usr/bin/ruby1.9.1 extconf.rb
    /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require‘: cannot load such file -- mkmf (LoadError)
            from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require‘
            from extconf.rb:4:in `<main>‘

这是因为没找到mkmf，这个是ruby1.9.1-dev包的一部分，装上就好。

apt-get install ruby1.9.1-dev

使用

config.rb

这里我们需要一个ruby文件，这个是给compass用的。

内容如下：

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the file automatically
#load File.join(dir, "..", "themes")

#Compass configuration
sass_path = dir
css_path = File.join(dir, "..", "css")
environment = :development # :production
output_style = :expanded # :compressed

Compass编译器将根据这个文件将SCSS样式文件编译为CSS样式表文件，并把编译好的css文件放在当前目录的上一层目录的css文件夹下。

这里需要注意：

environment = :development # :production
output_style = :expanded # :compressed
  • :development 表示是开发环境。
  • :expanded 表示编译为多行，并且生成注释。
  • :production 表示是生产环境。
  • :compressed 表示将样式表文件压缩为一行，并且删除SCSS样式文件中所有的注释和多余空格。

需要的时候可以灵活切换着两种方式。


我们建立一个style.scss的文件，这里要说明一下，SASS有两种文件后缀，一种是.sass，一种是.scss，据说sass的语法比较严格，而scss的语法更像css，所以一般推荐用scss后缀的比较多。

SASS和刚才的config.rb放在同一层目录，命令行运行compass compile即可。

如果你觉得麻烦，可以使用在线的SASS编辑器（http://sassmeister.com/），不过感觉生成预览有点慢，还是推荐自己装一个。

现在开始正式编写SASS.

嵌套

在CSS文件中，经常会书写一些开头相同的选择器。例如：

/* line 9, ../sass/style.scss */
#navbar {
  width: 80%;
  height: 23px;
}
/* line 13, ../sass/style.scss */
#navbar ul {
  list-style-type: none;
}
/* line 16, ../sass/style.scss */
#navbar li {
  float: left;
}
/* line 19, ../sass/style.scss */
#navbar li a {
  color: red;
}

如果换成用SASS写：

#navbar {
    width : 80%;
    height: 23px;

    ul {
        list-style-type: none;
    }
    li {
        float: left;

        a {
            color: red;
        }
    }
}

也可以属性嵌套，例如CSS如下:

.item-border {
  border-style: solid;
  border-left-width: 1px;
  border-left-color: red;
  border-right-width: 2px;
  border-right-color: blue;
}

在SCSS中，可以写成：

.item-border {
    border: {
        style: solid;

        left: {
            width: 1px;
            color: red;
        }
        right: {
            width: 2px;
            color: blue;
        }
    }
}

引用父选择器

在SCSS文件中，可以利用&关键字来实现对父选择器的引用。

CSS：

/* line 41, ../sass/style.scss */
.btn {
  color: #ccc;
}
/* line 43, ../sass/style.scss */
.btn:hover {
  color: red;
}
/* line 46, ../sass/style.scss */
.btn:visited {
  color: blue;
}

对应的SCSS:

.btn {
    color: #ccc;
    &:hover {
        color: red;
    }
    &:visited {
        color: blue;
    }
}

变量

在SCSS文件中，可以声明整个样式表文件中使用的变量，变量以$开头。

CSS:

/* line 53, ../sass/style.scss */
#navbar {
  border-bottom-color: #ccc;
  border-bottom-style: solid;
}

/* line 59, ../sass/style.scss */
a {
  color: #ccc;
}
/* line 61, ../sass/style.scss */
a:hover {
  border-bottom: 1px solid #ccc;
}

SCSS:

$text-color: #ccc;
$border-style: solid;
#navbar {
    border-bottom: {
        color: $text-color;
        style: $border-style;
    }
}
a {
    color: $text-color;
    &:hover {
        border-bottom: 1px $border-style #ccc;
    }
}

操作符和预定义函数

在SCSS中，我们还可以使用+,-,*,/,%等数学操作符。并且如果变量是带单位的，例如px，也可以正确的进行运算。

SCSS：

#navbar {
    $navbar-width: 800px;
    $item: 5;
    $navbar-color: #aaa;

    width: $navbar-width;
    border-bottom: 2px solid $navbar-color;

    li {
        float: left;
        width: $navbar-width/$item - 10px;

        background-color: lighten($navbar-color, 20%);
        &:hover {
            background-color: lighten($navbar-color, 10%);
        }
    }
}

这里还用到一个叫lighten的东西，这个是SCSS提供的预定义函数。这个函数是用来修改颜色亮度的。

对应生成的css：

/* line 66, ../sass/style.scss */
#navbar {
  width: 800px;
  border-bottom: 2px solid #aaa;
}
/* line 74, ../sass/style.scss */
#navbar li {
  float: left;
  width: 150px;
  background-color: #dddddd;
}
/* line 79, ../sass/style.scss */
#navbar li:hover {
  background-color: #c3c3c3;
}

插入

使用#{}符号可以将变量查到属性名，或者选择器中。

SCSS：

$side: top;
$radius: 10px;
.round-#{$side} {
    border-#{$side}-radius: $radius;
    -moz-border-#{$side}-radius: $radius;
    -webkit-border-#{$side}-radiux: $radius;
}

对应的css：

/* line 95, ../sass/style.scss */
.round-top {
  border-top-radius: 10px;
  -moz-border-top-radius: 10px;
  -webkit-border-top-radiux: 10px;
}

继承

可以通过@extend来进行属性的继承。

SCSS:

.base-nav {
    color: red;
}
.new-nav {
    @extend .base-nav;
    text-align: center;
}

CSS：

/* line 85, ../sass/style.scss */
.base-nav, .new-nav {
  color: red;
}

/* line 88, ../sass/style.scss */
.new-nav {
  text-align: center;
}

Mixin

Mixin是SASS中非常强大的特性之一。定义mixin时，需要在前面加@mixin，使用时需要添加@include来引用该mixin。

SCSS:

@mixin round-top {
    $side: top;
    $radius: 10px;

    border-#{$side}-radius: $radius;
    -moz-border-#{$side}-radius: $radius;
    -webkit-border-#{$side}-radiux: $radius;
}
#navbar li {
    @include round-top;
}
#footer {
    @include round-top;
}

对应的CSS:

/* line 110, ../sass/style.scss */
#navbar li {
  border-top-radius: 10px;
  -moz-border-top-radius: 10px;
  -webkit-border-top-radiux: 10px;
}

/* line 113, ../sass/style.scss */
#footer {
  border-top-radius: 10px;
  -moz-border-top-radius: 10px;
  -webkit-border-top-radiux: 10px;
}

Mixin还有个强大的地方就是可以为它传入参数，并且还可以为参数设定默认值。

SCSS:

@mixin round($side, $radius: 10px) {
    border-#{$side}-radius: $radius;
    -moz-border-#{$side}-radius: $radius;
    -webkit-border-#{$side}-radiux: $radius;
}

#navbar li {
    @include round(top);
}
#footer {
    @include round(top, 5px);
}
#sidebar {
    @include round(left, 8px);
}

CSS:

/* line 126, ../sass/style.scss */
#navbar li {
  border-top-radius: 10px;
  -moz-border-top-radius: 10px;
  -webkit-border-top-radiux: 10px;
}

/* line 129, ../sass/style.scss */
#footer {
  border-top-radius: 5px;
  -moz-border-top-radius: 5px;
  -webkit-border-top-radiux: 5px;
}

/* line 132, ../sass/style.scss */
#sidebar {
  border-left-radius: 8px;
  -moz-border-left-radius: 8px;
  -webkit-border-left-radiux: 8px;
}

导入

可以从外部文件导入mixin等。SASS中有一个命名惯例，被导入的样式文件文件名用下划线做前缀。导入的语法是@import "xxx"这里的xxx不需要带文件后缀，或者是下划线前缀。也就是说，“_tmp.scss”或者”_tmp.sass”导入的时候，就写@import "tmp"就可以了。

我们把之前的带参数的mixin放到”_round.scss”中，然后改调用的地方为：

@import "round";
#navbar li {
    @include round(top);
}
#footer {
    @include round(top, 5px);
}
#sidebar {
    @include round(left, 8px);
}

注释

/* comment */多行注释，会保留到编译后的文件，如果是压缩模式，则会被省略。

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

/*! comment */重要注释，即使是压缩模式也会保留，通常用来声明版权信息。

如果要写中文的话，最好在SCSS文件头声明编码格式@charset "utf-8";。

控制语句

使用@if来进行条件判断

$navbar-width: 800px;
$item: 5;
p {
    @if $navbar-width/$item - 10px < 200 { border: 2px dotted; }
    @if $navbar-width/$item - 10px == 150 { border: 1px solid; }
}

对应的css:

/* line 142, ../sass/style.scss */
p {
  border: 2px dotted;
  border: 1px solid;
}

也有@else

$navbar-width: 800px;
$item: 5;
p {
    @if $navbar-width/$item - 10px == 200 { border: 2px dotted; }

    @else { border: 1px solid; }
}

使用@for循环

SCSS：

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

CSS:

/* line 149, ../sass/style.scss */
.border-1 {
  border: 1px solid blue;
}

/* line 149, ../sass/style.scss */
.border-2 {
  border: 2px solid blue;
}

/* line 149, ../sass/style.scss */
.border-3 {
  border: 3px solid blue;
}

/* line 149, ../sass/style.scss */
.border-4 {
  border: 4px solid blue;
}

使用@while循环

SCSS:

$i: 1;
@while $i < 5 {
    .border-#{$i} { border: #{$i}px solid blue; }
    $i: $i + 1;
}

CSS:

/* line 156, ../sass/style.scss */
.border-1 {
  border: 1px solid blue;
}

/* line 156, ../sass/style.scss */
.border-2 {
  border: 2px solid blue;
}

/* line 156, ../sass/style.scss */
.border-3 {
  border: 3px solid blue;
}

/* line 156, ../sass/style.scss */
.border-4 {
  border: 4px solid blue;
}

使用@each循环

SCSS：

@each $item in add, update, remove, share {
    .icon-#{$item} {
        background-image: url("/image/#{$item}.jpg");
    }
}

CSS:

/* line 161, ../sass/style.scss */
.icon-add {
  background-image: url("/image/add.jpg");
}

/* line 161, ../sass/style.scss */
.icon-update {
  background-image: url("/image/update.jpg");
}

/* line 161, ../sass/style.scss */
.icon-remove {
  background-image: url("/image/remove.jpg");
}

/* line 161, ../sass/style.scss */
.icon-share {
  background-image: url("/image/share.jpg");
}

自定义函数

使用@function来自定义函数。

SASS：

@function double($n) {
    @return $n * 2;
}
#navbar {
    width: double(5px);
}

CSS:

/* line 169, ../sass/style.scss */
#navbar {
  width: 10px;
}

参考

http://sass-lang.com/

http://www.w3cplus.com/sassguide/install.html

http://www.ruanyifeng.com/blog/2012/06/sass.html

时间： 2024-10-24 08:04:38

SASS用法介绍的相关文章

SASS用法

SASS用法 CSS是一种编程语言.有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor).它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.本文介绍SASS,觉得它有很多优点.下面是一些用法总结. 一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文总结了SASS的主要用法.有了这篇文章,日常的一般使用就不需要去看官方文档了

关于Java中this和super的用法介绍和区别

1.this&super 什么是this,this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针.当你想要引用当前对象的某种东西,比如当前对象的某个方法,或当前对象的某个成员,你便可以利用this来实现这个目的.要注意的是this只能在类中的非静态方法中使用,静态方法和静态的代码块中绝对不能出现this.his也可作为构造函数来使用.在后面可以看到 而什么是super,可以理解为是指向自己超(父)类对象的一个指针,而这个超类指的是离自己最近的一个父类.super的作用同样是可

(转)常用算法（Algorithm）的用法介绍

2算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. 2<algorithm>是所有STL头文件中最大的一个,其中常用到的功能范围涉及到比较.交换.查找.遍历操作.复制.修改.反转.排序.合并等等. 2<numeric>体积很小,只包括几个在序列上面进行简单数学运算的模板函数,包括加法和乘法在序列上的一些操作. 2<functional>中则定义了一些模板类,用以声明函数对象. 2STL提供

grep过滤用法介绍（一）

grep过滤用法介绍(一) grep主要作用是过滤出指定的行,指定的行满足什么条件,满足的条件我们就可以用一个正则表达式来表示.为了方便下面的实验进行,我们先进行cp /etc/passwd  1.txt 例如:#grep 'root'1.txt,截图如下: 匹配过滤出,有root的行! grep有一个选项很好用: 1.grep --color 'root' 1.txt 标注红色.为了方便使用,我们做一个别名操作,alias cgrep='grep --color'[删除用unalias+别名]

grep过滤用法介绍（二）

grep过滤用法介绍(二) 背景:(1)alias cgrep='grep --color' (2)cp /etc/passwd  1.txt 1. cgrep -n 'root' 1.txt 包含root所在,行数. 2. cgrep -v 'nologin' 1.txt 不包含nologin. 3. cgrep '[0-9]' 1.txt 包含所有0-9中间数字包含任意一个的行. 4. cgrep '[a-zA-Z]' 1.txt 过滤所有字母. 5.cgrep '^[a-z]' 1.txt

Oracle CASE WHEN 用法介绍

Oracle CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END --Case搜索函数 CASEWHEN sex = '1' THEN '男' WHEN sex = '2' THEN '女' ELSE '其他' END 2. CASE WHEN 在语句中不同位置的用法 2.1 SELECT CASE WHEN 用法 SELECT gra

好压（HaoZip）的命令行模式用法介绍

好压压缩软件,又叫“2345好压”,是一款国产的优秀压缩软件,目前是免费的,据官网介绍,该软件永久免费.官网地址:http://haozip.2345.com/ 本文主要对该软件的命令行模式用法进行介绍.目前,压缩软件支持命令行模式的还有winrar,一款国外的优秀老牌压缩软件,winrar的命令行模式请参考我的另一篇博客: WinRAR的命令行模式用法介绍 - Fetty - 博客园  http://www.cnblogs.com/fetty/p/4769279.html 直接奉上我的测试代码

php $_SERVER[&#39;HTTP_USER_AGENT&#39;] 用法介绍

在PHP中HTTP_USER_AGENT是用来获取用户的相关信息的,包括用户使用的浏览器,操作系统等信息, 显示结果为: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.2372.400 QQBrowser/9.5.10548.400 这个时候我们可以用正则表达式来匹配以上字符串,用户的浏览器,操作系统信息

MyEclipse相关用法介绍

MyEclipse相关用法介绍 ================================================================================ 编辑: Ctrl+Shift+L      显示所有快捷键 Ctrl+K        参照选中的词(Word)快速定位到下一个 Ctrl+Shift+K      参照选中的词(Word)快速定位到上一个 Ctrl+O         快速显示OutLine Ctrl+T        快速显示当前类的