伙伴云客服论坛»论坛 S区 S产品资讯 查看内容

0 评论

0 收藏

分享

Saas详解

1. 特色功能 (Features)

    完全兼容 CSS3在 CSS 根底上增加变量、嵌套 (nesting)、混合 (mixins) 等功能通过函数停止颜色值与属性值的运算提供控制指令 (control directives)等高级功能自定义输出格式
2. 语法格式 (Syntax)

Sass有SCSS和Sass这两种语法格式,扩展名分别是.scss 和.sass

3.装置
  1. npm install -g sass
复制代码
4.语法规则

1.嵌套规则

scss代码
  1. #main p {
  2.   color: #00ff00;
  3.   width: 97%;
  4.   .redbox {
  5.     background-color: #ff0000;
  6.     color: #000000;
  7.   }
  8. }
复制代码
css代码
  1. #main p {
  2.   color: #00ff00;
  3.   width: 97%; }
  4.   #main p .redbox {
  5.     background-color: #ff0000;
  6.     color: #000000; }
复制代码
scss允许嵌套,防止一些不用要的反复,整个款式表的构造显得更加的明晰
2.父选择器 &

父选择器指的是在自身选择上面的一个选择器
  1. a {
  2.   font-weight: bold;
  3.   text-decoration: none;
  4.   &:hover { text-decoration: underline; }
  5.   body.firefox & { font-weight: normal; }
  6. }
复制代码
hover选择器的父选择器就是a选择器
翻译成对应的css
  1. a {
  2.   font-weight: bold;
  3.   text-decoration: none; }
  4.   a:hover {
  5.     text-decoration: underline; }
  6.   body.firefox a {
  7.     font-weight: normal; }
复制代码
3.属性嵌套

与第一条嵌套规则不同的是这条是属性可以嵌套,而第一条则是整个款式表可以嵌套,我们应该可以比较出二者的不同
scss代码
  1. .funky {
  2.   font: {
  3.     family: fantasy;
  4.     size: 30em;
  5.     weight: bold;
  6.   }
  7. }
复制代码
css代码
  1. .funky {
  2.   font-family: fantasy;
  3.   font-size: 30em;
  4.   font-weight: bold; }
复制代码
命名空间也可以包含自己的属性值,例如:
  1. .funky {
  2.   font: 20px/24px {
  3.     family: fantasy;
  4.     weight: bold;
  5.   }
  6. }
复制代码
css代码
  1. .funky {
  2.   font: 20px/24px;
  3.     font-family: fantasy;
  4.     font-weight: bold; }
复制代码
4. 注释 /* */ 与 // (Comments: /* */ and //)

Sass 支持规范的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完好输出到编译后的 CSS 文件中,而后者则不会.
5. SassScript

在 CSS 属性的根底上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性,允许属性使用变量、算数运算等额外功能。
通过 intERPolation,SassScript 甚至可以生成选择器或属性名,这一点对编写 mixin 有很大协助。
交互式的脚本Interactive Shell
脚本的根本语法
1.变量$
  1. $width: 5em;
复制代码
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(部分变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将部分变量转换为全局变量可以添加 !global 声明:
SassScript 支持 6 种主要的数据类型:
    数字,1, 2, 13, 10px字符串,有引号字符串与无引号字符串,"foo", 'bar', baz,通过#{ }可以将有引号字符串修改无引号字符串,这样便于在 mixin 中引用选择器名颜色,blue, #04a3f9, rgba(255,0,0,0.5)布尔型,true, false空值,null数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif 数组 (lists) 指 Sass 如何处置 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上,独立的值也被视为数组 —— 只包含一个值的数组。
    数组自身没有太多功能,但 Sass list functions 赋予了数组更多新功能:nth 函数可以直接访问数组中的某一项;join 函数可以将多个数组连接在一起;append 函数可以在数组中添加新值;而 @each 指令可以遍历数组中的每一项。
    maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
2.运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),假设必要会在不同单位间转换值。
scss代码
  1. p {
  2.   width: 1in + 8pt;
  3. }
复制代码
css代码
  1. p {
  2.   width: 1.111in; }
复制代码
/ 在 CSS 中通常起到分隔数字的用处,SassScript 作为 CSS 语言的拓展当然也支持这个功能,同时也赋予了 / 除法运算的功能。也就是说,假设 / 在 SassScript 中把两个数字分隔,编译后的 CSS 文件中也是同样的作用。
以下三种情况 / 将被视为除法运算符号:
    假设值,或值的一部分,是变量或者函数的返回值假设值被圆括号包裹假设值是算数表达式的一部分
  1. p {
  2.   font: 10px/8px;             // Plain CSS, no division
  3.   $width: 1000px;
  4.   width: $width/2;            // Uses a variable, does division
  5.   width: round(1.5)/2;        // Uses a function, does division
  6.   height: (500px/2);          // Uses parentheses, does division
  7.   margin-left: 5px + 8px/2px; // Uses +, does division
  8. }
复制代码
css代码
  1. p {
  2.   font: 10px/8px;
  3.   width: 500px;
  4.   height: 250px;
  5.   margin-left: 9px; }
复制代码
假设需要使用变量,同时又要确保 / 不做除法运算而是完好地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。
  1. p {
  2.   $font-size: 12px;
  3.   $line-height: 30px;
  4.   font: #{$font-size}/#{$line-height};
  5. }
复制代码
颜色值的运算是分段计算停止的,也就是分别计算红色,绿色,以及蓝色的值
3.插值语句#{ }

通过 #{} 插值语句可以在选择器或属性名中使用变量:
  1. $name :foo;
  2. $attr: border;
  3. p.#{$name} {
  4.     #($attr)-color: blue;
  5. }
复制代码
编译为
  1. p.foo {
  2.   border-color: blue; }
复制代码
#{} 插值语句也可以在属性值中插入 SassScript,大多数情况下,这样可能还不如使用变量方便,但是使用 #{} 可以防止 Sass 运行运算表达式,直接编译 CSS
  1. p {
  2.   $font-size: 12px;
  3.   $line-height: 30px;
  4.   font: #{$font-size}/#{$line-height};
  5. }
复制代码
编译为
  1. p {
  2.   font: 12px/30px; }
复制代码
6.@-Rules 与指令

1.@import

Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常,@import 寻找 Sass 文件并将其导入,但在以下情况下,@import 仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
    文件拓展名是 .css;文件名以 http:// 开头;文件名是 url();@import 包含 media queries。
假设不在上述情况内,文件的拓展名是 .scss 或 .sass,则导入胜利。没有指定拓展名,Sass 将会试着寻找文件名相同,拓展名为 .scss 或 .sass 的文件并将其导入。
  1. @import "foo";
复制代码
2.@media

Sass 中 @media 指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。假设 @media 嵌套在 CSS 规则内,编译时,@media 将被编译到文件的最外层,包含嵌套的父选择器。这个功能让 @media 用起来更方便,不需要反复使用选择器,也不会打乱 CSS 的书写流程。
3.@extend

继承某个款式
  1. .error {
  2.   border: 1px #f00;
  3.   background-color: #fdd;
  4. }
  5. .seriousError {
  6.   @extend .error;
  7.   border-width: 3px;
  8. }
复制代码
参考:Sass中文文档
学到react发现不会Sass,来补锅

回复

举报 使用道具

全部回复
暂无回帖,快来参与回复吧
本版积分规则 高级模式
B Color Image Link Quote Code Smilies

许晓萌
注册会员
主题 25
回复 19
粉丝 0
|网站地图
快速回复 返回顶部 返回列表