[关闭]
@EncyKe 2016-06-08T06:32:25.000000Z 字数 6174 阅读 3506

Sass

前端 CSS



1. 简介

官网集:
Sass
Ruby
RVM
Compass

定义: Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通CSS更加强大的功能。
Sass能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

特点:在CSS中加入变量、简单的逻辑程序、函数等编程特性;代码更加简洁、适应性更强、可读性更佳、更易于代码的维护。

CSS预处理器语言:

Sass与SCSS区别:

Sass/SCSS与CSS区别:

环境准备:

  1. 安装Ruby:Windows平台下需先安装Ruby,建议安装在C盘下,在安装过程中选择第二个选项;
  2. 安装Sass:
    • 命令安装Sass:打开电脑的Ruby命令终端,输入:gem install sass
    • Compass安装 Sass:Compass是基于Sass开发的一个框架(集成了很多写好的mixins和Sass函数),可在命令终端输入:sudo gem install sass
    • 本地安装Sass:到Rubygems 将Sass的安装包下载下来,然后在命令终端输入:gem install <输入安装文件路径>直接回车即可。
    • 淘宝RubyGems镜像安装Sass:还可以使用淘宝RubyGems镜像安装Sass。只是我们需要通过gem sources命令来配置源,先移除默认的,然后添加淘宝的源
      第一步:移动默认的源gem sources --remove https://rubygems.org/
      第二步:指定淘宝的源gem sources -a https://ruby.taobao.org/
      第三步:查看指定的源是不是淘宝源gem sources -l
      返回结果如下:
      *** CURRENT SOURCES *** https://ruby.taobao.org
      请确保只有ruby.taobao.org。无误后,执行下面的命令:gem install sass
  3. 测试Sass安装情况及更新:
    • 测试:sass -v此处输入图片的描述
    • 更新:gem update sass此处输入图片的描述
  4. 卸载Sass:gem uninstall sass

2. 编译

在线编译器

2.1. 命令编译

  1. 单文件编译
    sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
  2. 多文件编译
    sass sass/:css/
    上面的命令表示将项目中"sass"文件夹中所有".scss/.sass"文件编译成".css"文件,并且将这些CSS文件都放在项目中"css"文件夹中。
  3. 自动编译
    开启"watch"功能,自动监测代码修改且直接编译:sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2.2. GUI工具编译

  1. Koala
  2. CodeKit
  3. Scout
  4. Compass.app
  5. Prepros

2.3. 自动化编译

2.3.1. Grunt配置Sass编译示例

  1. module.exports = function(grunt) {
  2. grunt.initConfig({
  3. pkg: grunt.file.readJSON('package.json'),
  4. sass: {
  5. dist: {
  6. files: {
  7. 'style/style.css' : 'sass/style.scss'
  8. }
  9. }
  10. },
  11. watch: {
  12. css: {
  13. files: '**/*.scss',
  14. tasks: ['sass']
  15. }
  16. }
  17. });
  18. grunt.loadNpmTasks('grunt-contrib-sass');
  19. grunt.loadNpmTasks('grunt-contrib-watch');
  20. grunt.registerTask('default',['watch']);
  21. }

Grunt:Grunt-beginner前端自动化工具

2.3.2. Gulp配置Sass编译示例:

  1. var gulp = require('gulp');
  2. var sass = require('gulp-sass');
  3. gulp.task('sass', function () {
  4. gulp.src('./scss/*.scss')
  5. .pipe(sass())
  6. .pipe(gulp.dest('./css'));
  7. });
  8. gulp.task('watch', function() {
  9. gulp.watch('scss/*.scss', ['sass']);
  10. });
  11. gulp.task('default', ['sass','watch']);

2.4. 常见错误及调试

Sass常见的编译错误是字符编译引起的。在Sass的编译的过程中,是不支持"GBK"编码的。所以在创建Sass文件时,就需要将文件编码设置为"utf-8"。
另一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。

Sass调试:浏览器需支持sourcemap功能。
早一点的版本,需要在编译的时候添加--sourcemap参数:
sass --watch --scss --sourcemap style.scss:style.css
对v3.3以上,则不需要添加这个参数也可以:
sass --watch style.scss:style.css
在命令终端将有:

  1. >>> Change detected to: style.scss
  2. write style.css
  3. write style.css.map

2.5. 不同样式风格的输出方法

  1. 嵌套输出方式 nested
    在编译的时候带上参数--style nested
    sass --watch test.scss:test.css --style nested
    • 示例:
      此处输入图片的描述
  2. 展开输出方式 expanded
    在编译的时候带上参数--style expanded:
    sass --watch test.scss:test.css --style expanded`
    和nested类似,只是大括号另起一行。
    • 示例:
      此处输入图片的描述
  3. 紧凑输出方式 compact
    在编译的时候带上参数--style compact
    sass --watch test.scss:test.css --style compact
    产出单行CSS。
    • 示例:
      此处输入图片的描述
  4. 压缩输出方式 compressed
    在编译的时候带上参数--style compressed
    sass --watch test.scss:test.css --style compressed
    去掉标准的Sass和CSS注释及空格。
    • 示例:
      此处输入图片的描述

3. 语法

3.0. 注释

  1. /*这一注释直接被编译*/
  2. //这一注释不被编译

3.1. 变量

定义:$变量名:值;
调用:$变量名;

从v3.4开始,Sass已经可以正确处理作用域的概念。
全局变量:定义在元素外面的变量;
局部变量:定义在元素内部的变量;
普通变量:定义之后可以在全局范围内使用;
默认变量:追加!default用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。

基本上,没有理由声明一个永远不需要更新或者只在单一地方使用变量。

3.2. 嵌套

3.2.1. 选择器嵌套

  1. nav a {
  2. color: red;
  3. }
  4. header nav a {
  5. color: green;
  6. }

可写作:

  1. nav {
  2. a {
  3. color: red;
  4. header & {
  5. color: green;
  6. }
  7. }
  8. }

3.2.2. 属性嵌套

  1. .box {
  2. border-top: 1px solid red;
  3. border-bottom: 1px solid green;
  4. }

可写作:

  1. .box {
  2. border: {
  3. top: 1px solid red;
  4. bottom: 1px solid green;
  5. }
  6. }

3.2.3. 伪类嵌套

  1. .clearfix:before,
  2. .clearfix:after {
  3. content: "";
  4. display: table;
  5. }
  6. .clearfix:after {
  7. clear: both;
  8. overflow: hidden;
  9. }

可写作:

  1. .clearfix{
  2. &:before,
  3. &:after {
  4. content:"";
  5. display: table;
  6. }
  7. &:after {
  8. clear:both;
  9. overflow: hidden;
  10. }
  11. }

3.3. 混合宏

3.3.1. 声明

使用@mixin声明混合宏。
不带参数的混合宏:

  1. @mixin 混合宏名{
  2. 复用样式
  3. }

带参数混合宏:

  1. @mixin 混合宏名($变量:默认值){
  2. 样式: $变量;...
  3. }

传入参数可只传变量,不带值。
复杂的混合宏(带逻辑关系):

  1. @mixin 混合宏名($变量...) {
  2. // 传入多个参数时用","隔开
  3. // 传入参数过多时可使用"..."来替代
  4. @if 逻辑条件
  5. {
  6. 代码块
  7. }
  8. @else
  9. {
  10. 代码块
  11. }
  12. }

3.3.2. 调用

使用@include调用声明了的混合宏。

  1. 选择器 {
  2. @include 混合宏名(值);
  3. }

3.4. 继承

语法:@extend .已有样式类名
示例:

  1. .btn {
  2. border: 1px solid #ccc;
  3. padding: 6px 10px;
  4. font-size: 14px;
  5. }
  6. .btn-primary {
  7. background-color: #f36;
  8. color: #fff;
  9. @extend .btn;
  10. }

表示.btn-primary继承了全部.btn的样式;

3.5. 占位符

%placeholder声明的代码,如果不被@extend调用的话,不会产生任何代码。
示例:

  1. %mt5 {
  2. margin-top: 5px;
  3. }
  4. %pt5{
  5. padding-top: 5px;
  6. }
  7. //不@extend不编译产生代码
  8. .btn {
  9. @extend %mt5;
  10. @extend %pt5;
  11. //调用后才产生代码
  12. }

* 混合宏、继承、占位符比较

混合宏

缺点:并不自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余;
优点:可传参数;
使用:若代码块涉及变量,建议使用混合宏来创建相同的代码块。

继承

缺点:不能传变量参数;
优点:会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现,这样编译出来的代码相对于混合宏来说要干净的多,也是CSSer期望看到;
使用:若代码块不需要专任何变量参数,而且有一个基类已在文件中存在,建议使用Sass继承。

占位符

缺点:不能传变量参数;
优点:和继承基本相同,但不会在代码中生成基类选择器;
区别:占位符是独立定义,不调用的时候是不会在CSS中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的CSS代码中。
此处输入图片的描述

3.6. 插值

语法:#{}
功能和局限性未知,并不完善。
示例:

  1. $properties: (margin, padding);
  2. @mixin set-value($side, $value) {
  3. @each $prop in $properties {
  4. #{$prop}-#{$side}: $value;
  5. }
  6. }
  7. .login-box {
  8. @include set-value(top, 14px);
  9. }

编译成:

  1. .login-box {
  2. margin-top: 14px;
  3. padding-top: 14px;
  4. }

3.7. 数据类型

列表函数

3.8. 其它

3.8.1. @import

局部文件以_开头,不被编译;建议一个"_variables.scss"专门储存变量,以一个"_mixin.scss"专门储存@mixin函数;再在宿主文件即主要scss文件中用@import引用:

  1. /*
  2. * CONTENTS
  3. *
  4. * SETTINGS
  5. * variables………………变量集中存储文件;
  6. *
  7. * TOOLS
  8. *
  9. * CONPONENTS
  10. * reset…………………………Compass内置重置样式文件;
  11. * BUSINESS
  12. *
  13. * BASE
  14. * main.scss………………宿主文件,即针对站点样式的主要样式表;
  15. */
  16. @import "variables", "compass/reset"
  17. //_以及.scss可以省略;compass/reset是Compass自带的重置文件,优于一般的normalize;

Sass中使用的@import并非原生的CSS@import,要在Sass中使用原生的,需满足:

3.8.2. @at-root

@at-root{}:把{}中的样式表放到根部;
通常用于类名命名逻辑富集时,如:

  1. .main{
  2. @at-root{
  3. .main_center{}
  4. .main_aside{}
  5. }
  6. }

3.8.3. @error & @warn

@error@warn:供在传入参数出现错误时在控制台上报错;

3.8.4. @function

@function:与代码块无关的函数,多是内置函数;很不常用;


4. 运算

变量、数值、色值、字符均可运算;
碰到不同类型的单位时编译会报错;

4.1. 加法

样式: 变量 + 变量;

4.2. 减法

样式: 变量 - 变量;

4.3. 乘法

样式: 变量 * 变量;
两个值单位相同时,只需要为一个数值提供单位即可。

4.4. 除法


附:参考

慕课:Sass入门篇
慕课:Sass和Compass必备技能之Sass篇



添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注