@EncyKe
2016-06-08T06:32:25.000000Z
字数 6174
阅读 3832
前端
CSS
定义: Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通CSS更加强大的功能。
Sass能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。
特点:在CSS中加入变量、简单的逻辑程序、函数等编程特性;代码更加简洁、适应性更强、可读性更佳、更易于代码的维护。
CSS预处理器语言:
Sass与SCSS区别:
{}
和分号;
,而SCSS的语法书写和CSS语法书写方式非常类似;Sass/SCSS与CSS区别:
{}
和;
,以严格缩进控制;环境准备:
gem install sass
;sudo gem install sass
;gem install <输入安装文件路径>
直接回车即可。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
sass -v
,gem update sass
,gem uninstall sass
;sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
sass sass/:css/
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'style/style.css' : 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
Grunt:Grunt-beginner前端自动化工具
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass','watch']);
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
在命令终端将有:
>>> Change detected to: style.scss
write style.css
write style.css.map
--style nested
: sass --watch test.scss:test.css --style nested
--style expanded:
sass --watch test.scss:test.css --style expanded` --style compact
: sass --watch test.scss:test.css --style compact
--style compressed
: sass --watch test.scss:test.css --style compressed
/*这一注释直接被编译*/
//这一注释不被编译
定义:$变量名:值;
调用:$变量名;
从v3.4开始,Sass已经可以正确处理作用域的概念。
全局变量:定义在元素外面的变量;
局部变量:定义在元素内部的变量;
普通变量:定义之后可以在全局范围内使用;
默认变量:追加!default
用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。
基本上,没有理由声明一个永远不需要更新或者只在单一地方使用变量。
nav a {
color: red;
}
header nav a {
color: green;
}
可写作:
nav {
a {
color: red;
header & {
color: green;
}
}
}
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
可写作:
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
可写作:
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
使用@mixin
声明混合宏。
不带参数的混合宏:
@mixin 混合宏名{
复用样式
}
带参数混合宏:
@mixin 混合宏名($变量:默认值){
样式: $变量;...
}
传入参数可只传变量,不带值。
复杂的混合宏(带逻辑关系):
@mixin 混合宏名($变量...) {
// 传入多个参数时用","隔开
// 传入参数过多时可使用"..."来替代
@if 逻辑条件
{
代码块
}
@else
{
代码块
}
}
使用@include
调用声明了的混合宏。
选择器 {
@include 混合宏名(值);
}
语法:@extend .已有样式类名
示例:
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
表示.btn-primary
继承了全部.btn
的样式;
%placeholder
声明的代码,如果不被@extend
调用的话,不会产生任何代码。
示例:
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
//不@extend不编译产生代码
.btn {
@extend %mt5;
@extend %pt5;
//调用后才产生代码
}
缺点:并不自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余;
优点:可传参数;
使用:若代码块涉及变量,建议使用混合宏来创建相同的代码块。
缺点:不能传变量参数;
优点:会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现,这样编译出来的代码相对于混合宏来说要干净的多,也是CSSer期望看到;
使用:若代码块不需要专任何变量参数,而且有一个基类已在文件中存在,建议使用Sass继承。
缺点:不能传变量参数;
优点:和继承基本相同,但不会在代码中生成基类选择器;
区别:占位符是独立定义,不调用的时候是不会在CSS中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的CSS代码中。
语法:#{}
功能和局限性未知,并不完善。
示例:
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
编译成:
.login-box {
margin-top: 14px;
padding-top: 14px;
}
null
;1.5em 1em 0 2em
、Helvetica, Arial, sans-serif
。列表函数
局部文件以_
开头,不被编译;建议一个"_variables.scss"专门储存变量,以一个"_mixin.scss"专门储存@mixin函数;再在宿主文件即主要scss文件中用@import
引用:
/*
* CONTENTS
*
* SETTINGS
* variables………………变量集中存储文件;
*
* TOOLS
*
* CONPONENTS
* reset…………………………Compass内置重置样式文件;
* BUSINESS
*
* BASE
* main.scss………………宿主文件,即针对站点样式的主要样式表;
*/
@import "variables", "compass/reset"
//_以及.scss可以省略;compass/reset是Compass自带的重置文件,优于一般的normalize;
Sass中使用的@import
并非原生的CSS@import
,要在Sass中使用原生的,需满足:
@import
后面跟.css
;http://
开头;url()
时;media queries
;@at-root{}
:把{}中的样式表放到根部;
通常用于类名命名逻辑富集时,如:
.main{
@at-root{
.main_center{}
.main_aside{}
}
}
@error
与@warn
:供在传入参数出现错误时在控制台上报错;
@function
:与代码块无关的函数,多是内置函数;很不常用;
变量、数值、色值、字符均可运算;
碰到不同类型的单位时编译会报错;
样式: 变量 + 变量;
样式: 变量 - 变量;
样式: 变量 * 变量;
两个值单位相同时,只需要为一个数值提供单位即可。
样式: $变量 / $变量;
样式: (数值 / 数值);
样式: 数值 / 数值 + 数值;
慕课:Sass入门篇
慕课:Sass和Compass必备技能之Sass篇