关于Sass

一些常用操作命令：

//.sass文件和.scss文件可以相互转换

sass- convert a.sass b.scss

//将sass文件编译成css文件

sass demo.scss product.css

//还可以设置css的输出风格

sass --style compressed test.scss test.css

//输出样式的风格可以有四种选择，默认为nested

//nested：嵌套缩进的css代码

//expanded：展开的多行css代码

//compact：简洁格式的css代码

//compressed：压缩后的css代码

监听命令，实时刷新css：

//watch单个文件

sass --watch test.scss:test.css

//watch文件夹

sass --watch app/sass: public /stylesheets

1，Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; }}

2，父选择器

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定  hover  样式时，或者当  body  元素有某个 classname 时，可以用  &  代表嵌套规则外层的父选择器。

a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; }}

3，sass的@import指令会在编译阶段将import文件合并到当前的宿主文件中,sass提供了一个load_paths选项，用来添加额外的寻路路径。

sass的既定规则：

1，当没有文件后缀名的时候，sass会添加.scss或者.sass后缀

2，同一个目录下局部文件和非局部文件不能重名

4，@import "compass/reset"，reset是sass提供的一个重置模块，html会有一个默认的样式，reset使得默认样式去掉。

温和的normalize重置掉不需要的样式，统一浏览器的初始样式。

5，使用css原生的@import的既定规则：

1，当@import后面跟的文件名是以css结尾时

2，当@import后面跟的是http://开头的字符串

3，当@import后面跟的是一个url()函数时

4，当@import后面带有media queries的时候

6，变量操作

1，直接操作变量，即变量表达式

2，通过函数

（1）跟代码块无关的函数，多是自己内置函数，成为functions

（2）可重用的代码块，成为mixin，解决样式复用

@include 使用时用复制拷贝的方式存在

@extend 使用时用组合声明的方式存在 ，继承其他选择器的样式，可继承多个样

式，连续继承。 1，不能继承选择器序列 2，使用%用来构建只用来继承的选择器

@mixin col-6 {

width: 50%;

float: left;

}

@mixin col-sm ($width: 50%) {

@if type-of($width) != number {

@error "$width必须是一个数值类型，你输入的width是： #{$width}.";

}

@if not unitless($width) {

@if unit($width) != "%" {

@error "$width应该是一个百分值，你输入的width是： #{$width}.";

}

} @else {

@warn "$width应该是一个百分值，你是入的width是： #{$width}.";

$width: (percentage($width)) / 100;

}

@media (min-width: 768px){

width: $width;

float: left;

}

}

7，sass的@media跟css区别：

1，sass中的media query可以内嵌在css规则中

2，在生成css的时候。media query才会被提到样式的最高层级

好处：避免重复书写选择器或者打乱样式表的流程

8，sass的at-root指令可在嵌套时使用，明确指定被嵌套的内容输出到样式表顶层

9，.main-sec {

font-family:$main-sec-ff;

//将@at-root的内容提到前面

@at-root{

.main-sec-headline {

font: {

family:$main-sec-ff;

size:16px;

}

}

.main-sec-detail {

font-size:12px;

}

}

}