问题:
问:css 预处理器:
定义一种新的语言将css作为目标生成文件 然后开发者就只要使用这种语言进行编码工作
问:如果最终生成的是css代码 那么为何不直接写css:
1.大型项目 复杂的css文件和模块 不太好维护
2.写多套css麻烦(比如皮肤切换的功能,利用sass可以使用变量和函数写一套就行)
问:为什么使用sass:
使用变量函数
自动装换rgba颜色值
忘记浏览器前缀
嵌套规则
media query更简单
自动压缩css
问:命令行创建工程
直接创建 xxx.scss
compass create 项目名
问:命令行编译sass
sass src.scss dst.css
sass --watch src.scss:dst.css
compass compile
compass watch
compass watch -force -s compact
问:输出风格
nested expanded compact compressed 四种
问:compass配置文件
config.rb
问:支持中文注释
Encoding.default_external = Encoding.find(‘utf-8’)
Sass 是一个 CSS 的扩展,它在 CSS 语法的基础上,允许您使用
变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports)
等功能,令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库
有助于更好地组织管理样式文件,以及更高效地开发项目。
总结:(具体用法请参考手册,这里只做快速查找)
数据类型 (Data Types)(7 种主要的数据类型)参考
- 数字 (例如: 1.2, 13, 10px)
- 文本字符串,带引号字符串和不带引号字符串(例如:“foo”, ‘bar’, baz)
- 颜色 (例如:blue, #04a3f9, rgba(255, 0, 0, 0.5))
- 布尔值 (例如: true, false)
- 空值 (例如: null)
- 值列表 (list),用空格或逗号分隔 (例如: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
- maps ,从一个值映射到另一个 (例如: (key1: value1, key2: value2))
//$i -->变量以美元符号开始,赋值像设置CSS属性那样
ex1:
$width: 5em;
你可以在属性中引用他们:
#main {
width: $width;
}
//#{$i} -->{}外,字符串中要使用变量,就用这样用格式
// !global --> 在这种情况下,变量在任何地方可见(可以理解为全局变量)
ex1:
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
编译为:
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
// !default --> 如果已经赋值,那么它不会被重新赋值,如果它尚未赋值,
那么它会被赋予新的给定值。如果变量是 null 值时,将视为未赋值
ex1:
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
编译为:
#main {
content: "First content";
new-content: "First time reference"; }
ex2:
$content: null;
$content: "Non-null content" !default;
#main {
content: $content;
}
编译为:
#main {
content: "Non-null content"; }
//@import --> 原生和sass中的区别
// - _ -->在变量中没区别 由于历史原因,变量名(以及其他所有Sass标识符)可以互换
连字符(注:-)和下划线(注:_)
例如,如果你定义了一个名为 $main-width,您可以使用 $main_width访问它,反之亦然。
// $at-root --> 跳出
//嵌套属性
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译为:
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
命名空间也可以有自己的属性值。例如:
.funky {
font: 20px/24px fantasy {
weight: bold;
}
}
编译为:
.funky {
font: 20px/24px fantasy;
font-weight: bold;
}
// & -->引用引用父选择器
ex1:
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
编译为:
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
// % -->占位
// @extend -->继承
// @mixin -->片段
// @include -->引入片段
//@media -->有点特殊
//运算符 == != > < + - * / %
// @function getzIndex() {} -->函数
//@if 条件 {} --> 分支结构
//@else if 条件 {} --> 分支结构
//@else {} --> 分支结构
//@for $i from 1 through 5 {} --> 循环结构
//@for $i from 1 to 5 {} --> 不包含5
//@while 条件 {} --> 循环结构
//@each $i in x,x,x {} --> 遍历
//@each $i,$j in (x,y),(x,y),(x,y) {}
//@each $k,$v in (k:v,k:v,k:v) {}
基本使用
@import "_part1.scss";
@import "part1";
//css原生导入
@import "part1.css";
$font-size:12px;
$font-size:14px !default;
$paddings: 3px 10px 5px 10px;
$maps:(color:red,bordercolor:blue);
$className:main;
body{
$color:red !global;
color:$color;
font-size:$font-size;
padding:$paddings;
padding-left:nth($paddings,1);
}
footer{
// $color:green;
color:$color;
background:map-get($maps,color);
border-color:map-get($maps,bordercolor);
}
.#{$className}{
width:50px;
height:50px;
}
$text-info:lightgreen;
$text_info:red;
.text-info{
color:$text-info;
background:$text_info;
}
函数和编程语言的函数区别:
@function buildLayout($num:5){
$map:(defaultValue:0);
$rate: percentage(1 / $num);
@for $i from 1 through $num{
$tmpMap:(col#{$i}:$rate * $i);
$map:map-merge($map,$tmpMap);
}
$map:map-remove($map,defaultValue);
@return $map;
}
// @debug buildLayout();
@mixin buildLayout($num:5){
$map:buildLayout($num);
@each $key,$value in $map{
.#{$key}{
width:$value;
}
}
}
@include buildLayout($num:5);
//sass的函数是不能直接生成样式到css文件里面的(就是不能单独调用,调用的时候要赋给
一个变量或者@debug输出到后台),因为sass文件里面本来就是样式+语法然后转换解析成
css,所以只有样式区域才能直接到css,其他都要经过解析. css里面是没有条件控制这些
逻辑的(有一点点状态逻辑所以才有动画),所以我们要写样式,css才能有东西.而片段和继
承只是为了让样式重复利用.
//这个和我们平常用的那些语言不同,平常语言的函数是可以直接调用输出东西的,因为两种
语言本身的角度就不同,输出的地方也不同,造成了这种用法思维的区别
//例如:
// body{
// @function a(){
// @return 'width:1';
// }
// // width:a();//理所当然成功
// a();//报错
// }
@function getzIndex($layer:default){
$zindexMap:(default:1,modal:1000,dropdown:500,grid:300);
$zindex:1;
@if map-has-key($zindexMap,$layer){
$zindex:map-get($zindexMap,$layer)
}
@return $zindex;
}
@debug getzIndex('modal1');