javascript
// 由于 Node 原生支持模块的作用域,并不需要额外的 wrapper
// "as though the module was wrapped in a function"
var a = require('./a') // 加载模块(同步加载)
a.doSomething() // 等上一句执行完才会执行
exports.b = function(){ // 暴露 b 函数接口
// do something
}
Sass - CSS 预处理器
简介
CSS 预处理器:
定义一种新的语言,为CSS
增加了一些编程的特性,将CSS作为目标生成文件,开发者可以使用这种语言进行编码工作
Sass背景
Sass是对CSS的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS
。
Sass已经有了两套语法规则:
- 一个依旧是用缩进作为分隔符来区分代码块的;
- 另一套规则和
CSS
一样采用了大括号作为分隔符。 后一种语法规则又名Scss
。(Scss
更常用,以下说得Sass在没有特别指出得情况下,指的都是Scss
)。
书写规范
- 声明文档的字符编码
- 导入引用
@mixin
和function
等等 - 文档的简要概述
- 嵌套层级不要太深,适当的时候使用
@at-root
- 不要忘记写
;
scss
@charset "UTF-8";
@import "mixin.scss"; //导入其他文件
@import "mixin"; //导入其他文件
/**
* @fileoverview <%= projectName %>.
* @author <%= author %> <<%= email %>>
* @version <+DATE+>
*/
局部文件
名字以下划线开头比如 _reset.scss
. 下划线让Sass知道这个文件是一个分部文件,不会为它单独产生一个CSS文件。可以使用@import导入分部文件.
-----------_reset.scss-----------
scss
html,body,ul,ol {
margin: 0;
padding: 0;
}
---------base.scss-----------
scss
/* base.scss */
@import 'reset'; // 可忽略下划线
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
---------编译后-----------
scss
/* base.scss */
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
常见错误
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. 忘记设置编码
scss
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`"
原因:文档没有设置 编码格式 解决方法:文档第一行@charset "UTF-8";
"UTF-8"大写
3. 句末忘记写 “;" 也会报错
scss
@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;
}
第一行 @charset 句末忘记写 “;”。报错会出现在第8行(也就是错误本身的下一个css主体处,找错应该向上找;): ![](/images/posts2015/02-05/image2014-12-12 15-41-32.png)
gulp-ruby-sass 相关
bash
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(运算符)
文章信息
- 文章标题:Some Sass writing standards - Keystion
- 文章链接:https://webclown.net/posts/Some-Sass-writing-standards.html
- 版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。
- 转载请注明来自 Keystion !
markdown
[Some Sass writing standards - Keystion](https://webclown.net/posts/Some-Sass-writing-standards.html)