Keystion的小博客

Some Sass writing standards

Sass - CSS 预处理器

简介

CSS 预处理器:

定义一种新的语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,开发者可以使用这种语言进行编码工作

Sass背景

Sass是对CSS的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS

Sass已经有了两套语法规则:

  • 一个依旧是用缩进作为分隔符来区分代码块的;
  • 另一套规则和CSS一样采用了大括号作为分隔符。
    后一种语法规则又名Scss。(Scss更常用,以下说得Sass在没有特别指出得情况下,指的都是Scss)。

书写规范

  1. 声明文档的字符编码
  2. 导入引用 @mixinfunction 等等
  3. 文档的简要概述
  4. 嵌套层级不要太深,适当的时候使用 @at-root
  5. 不要忘记写;
    1
    2
    3
    4
    5
    6
    7
    8
    @charset "UTF-8";
    @import "mixin.scss"; //导入其他文件
    @import "mixin"; //导入其他文件
    /**
    * @fileoverview <%= projectName %>.
    * @author <%= author %> <<%= email %>>
    * @version <+DATE+>
    */

局部文件

名字以下划线开头比如 _reset.scss. 下划线让Sass知道这个文件是一个分部文件,不会为它单独产生一个CSS文件。可以使用@import导入分部文件.

———–_reset.scss———–

1
2
3
4
5
6
html,body,ul,ol {
margin: 0;
padding: 0;
}
```
---------base.scss-----------

/ base.scss /
@import ‘reset’; // 可忽略下划线
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

1
---------编译后-----------

/ base.scss /
html, body, ul, ol {
margin: 0;
padding: 0;
}

body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

### 常见错误

#### 1. 编译后css文件中出现 `@at-root`
- @at-root 是Sass3.3版本的新特性
- 解决方法:升级你的sass版本
- gem update sass
- sass -v
- Ps:升级过程中可能需要当前生产环境下的某个文件夹的读写权限;
- ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions into the /usr/local/bin directory.
- 执行命令:sudo chmod -R 777 <-filepath->
- 关于”chmod“的更多信息,请百度或google学习
#### 2. 忘记设置编码

Error: Invalid US-ASCII character “\xE4
on line 4 of app/assets/scss/_web/topdeals-web.scss
Use –trace for backtrace.
Warning: Exited with error code 65 Use –force to continue.
Syntax error: Invalid GBK character “\xE5

1
2
3
原因:文档没有设置 编码格式
解决方法:文档第一行`@charset "UTF-8";` "UTF-8"大写
#### 3. 句末忘记写 “;" 也会报错

@charset “UTF-8”
/**

  • @fileoverview Home Paga Stylesheet
  • @author shang.yantao shang.yantao@topka.cn
  • @copyRight topka.cn
  • @versioon v1.0
    */
    body{
    font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
    }
    1
    2
    3
    第一行  @charset 句末忘记写 “;”。报错会出现在第8行(也就是错误本身的下一个css主体处,找错应该向上找;):
    ![](/blog/images/posts2015/02-05/image2014-12-12 15-41-32.png)
    #### gulp-ruby-sass 相关

gulp-ruby-sass: stderr: OptionParser::InvalidOption: invalid option: –sourcemap=none
Use –trace for backtrace.
`
升级sass> gem update sass

http://sass-lang.com/guide 官方文档

  • Preprocessing(预处理)
  • Variables(变量)
  • Nesting(嵌套)
  • Partials(局部文件)
  • Import(导入文件)
  • Mixins(混合变量)
  • Extend/Inheritance(扩展/继承)
  • Operators(运算符)
Keystion wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
来一杯咖啡~
Keystion WeChat Pay

微信打赏

Keystion Alipay

支付宝打赏