济南网站建设找聚搜网络,ui网页设计师,常州网站推,成免费crm软件app前言#xff1a; 这份记录#xff0c;主要是记录学习sass的学习记录#xff0c;用于记录一些本人认为可能以后会用到的比较常用的一些知识点#xff0c;更详细的请看sass官网
功能1-嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中#xff0c;内层的样式将它外层的…前言 这份记录主要是记录学习sass的学习记录用于记录一些本人认为可能以后会用到的比较常用的一些知识点更详细的请看sass官网
功能1-嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中内层的样式将它外层的选择器作为父选择器例如这样写css结构清晰避免了重复输入父选择器而且令复杂的 CSS 结构更易于管理
#main p {color: #00ff00;width: 97%;.redbox {background-color: #ff0000;color: #000000;}
}
编译为
#main p {color: #00ff00;width: 97%;
}
#main p .redbox {background-color: #ff0000;color: #000000;
}
父选择器
在嵌套 CSS 规则时有时也需要直接使用嵌套外层的父选择器例如当给某个元素设定 hover 样式时或者当 body 元素有某个 classname 时可以用 代表嵌套规则外层的父选择器。
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;
}
与后缀组合选择器 必须作为选择器的第一个字符其后可以跟随后缀生成复合的选择器例如
#main {color: black;-sidebar { border: 1px solid; }
}
编译为
#main {color: black;
}#main-sidebar {border: 1px solid;
}
命名空间 (namespace)
比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性同时也为了避免了重复输入Sass 允许将属性嵌套在命名空间中例如
.funky {font: {family: fantasy;size: 30em;weight: bold;}
}
编译为
.funky {font-family: fantasy;font-size: 30em;font-weight: bold;
}
注释 /* */多行注释 与 //当行注释
Sass 支持标准的 CSS 多行注释 /* */以及单行注释 //前者会 被完整输出到编译后的 CSS 文件中而后者则不会例如
/* This comment is* several lines long.* since it uses the CSS comment syntax,* it will appear in the CSS output. */
body { color: black; }// These comments are only one line long each.
// They wont appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
编译为
/* This comment is* several lines long.* since it uses the CSS comment syntax,* it will appear in the CSS output. */
body {color: black; }a {color: green; }
SassScript
变量 $
SassScript 最普遍的用法就是变量变量以美元符号开头赋值方法与 CSS 属性的写法一样
定义变量
$width: 5em;
直接调用
#main {width: $width;
}
变量支持块级作用域嵌套规则内定义的变量只能在嵌套规则内使用局部变量不在嵌套规则内定义的变量则可在任何地方使用全局变量。将局部变量转换为全局变量可以添加 !global 声明
#main {// 下面这是定义全局变量 $width$width: 5em !global;width: $width;
}#sidebar {width: $width;
}
数据类型
SassScript 支持 6 种主要的数据类型
数字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-serifmaps, 相当于 JavaScript 的 object(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值比如 Unicode 字符集或 !important 声明。然而Sass 不会特殊对待这些属性值一律视为无引号字符串他们的一些介绍说明详情看官网
运算
所有数据类型均支持相等运算 或 !此外每种数据类型也有其各自支持的运算方式。
数字运算
SassScript 支持数字的加减乘除、取整等运算 (, -, *, /, %)如果必要会在不同单位间转换值。
p {width: 1in 8pt;
}
编译为
p {width: 1.111in; }
关系运算 , , , 也可用于数字运算相等运算 , ! 可用于所有数据类型。
除法运算
/ 在 CSS 中通常起到分隔数字的用途SassScript 作为 CSS 语言的拓展当然也支持这个功能同时也赋予了 / 除法运算的功能。也就是说如果 / 在 SassScript 中把两个数字分隔编译后的 CSS 文件中也是同样的作用。
以下三种情况 / 将被视为除法运算符号
如果值或值的一部分是变量或者函数的返回值如果值被圆括号包裹如果值是算数表达式的一部分 p {font: 10px/8px; // 不执行除法$width: 1000px; // 定义局部变量width: $width/2; // 使用变量 / 执行除法width: round(1.5)/2; // 调用函数执行除法height: (500px/2); // 使用括号执行除法margin-left: 5px 8px/2px; // 使用加号 执行除法
}
编译为
p {font: 10px/8px;width: 500px;height: 250px;margin-left: 9px; }
如果需要使用变量同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中只需要用 #{} 插值语句将变量包裹。
p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}
编译为
p {font: 12px/30px; }
颜色值运算
颜色值的运算是分段计算进行的也就是分别计算红色绿色以及蓝色的值
p {color: #010203 #040506;
}
计算 01 04 05 02 05 07 03 06 09然后编译为
编译为
p {color: #050709; }
数字与颜色值之间也可以进行算数运算同样也是分段计算的比如
p {color: #010203 * 2;
}
计算 01 * 2 02 02 * 2 04 03 * 2 06然后编译为
p {color: #020406; }
需要注意的是如果颜色值包含 alpha channelrgba 或 hsla 两种颜色值必须拥有相等的 alpha 值才能进行运算因为算术运算不会作用于 alpha 值。
p {color: rgba(255, 0, 0, 0.75) rgba(0, 255, 0, 0.75);
}
编译为
p {color: rgba(255, 255, 0, 0.75); }
颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
$translucent-red: rgba(255, 0, 0, 0.5);
p {color: opacify($translucent-red, 0.3);background-color: transparentize($translucent-red, 0.25);
}
编译为
$translucent-red: rgba(255, 0, 0, 0.5);
p {color: opacify($translucent-red, 0.3);background-color: transparentize($translucent-red, 0.25);
}
字符串运算 可用于连接字符串
p {cursor: e -resize;
}
编译为
p {cursor: e-resize; }
注意如果有引号字符串位于 左侧连接无引号字符串运算结果是有引号的相反无引号字符串位于 左侧连接有引号字符串运算结果则没有引号。
p:before {content: Foo Bar;font-family: sans- serif;
}
编译为
p:before {content: Foo Bar;font-family: sans-serif; }
在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
p:before {content: I ate #{5 10} pies!;
}
编译为
p:before {content: I ate 15 pies!; }SassScript 支持布尔型的 and or 以及 not 运算。
数组不支持任何运算方式只能使用 list functions 控制。
圆括号可以用来影响运算的顺序
p {width: 1em (2em * 3);
}编译后
p {width: 7em;
}
函数
SassScript 定义了多种函数有些甚至可以通过普通的 CSS 语句调用
p {color: hsl(0, 100%, 50%);
}
编译为
p {color: #ff0000; }
Sass 函数允许使用关键词参数 (keyword arguments)上面的例子也可以写成
p {color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
虽然不够简明但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口以及容易调用的参数。关键词参数可以打乱顺序使用如果使用默认值也可以省缺另外参数名被视为变量名下划线、短横线可以互换使用。
通过 Sass::Script::Functions 查看完整的 Sass 函数列表参数名以及如何自定义函数。
插值语句
通过 #{} 插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}编译为
p.foo {border-color: blue; }
#{} 插值语句也可以在属性值中插入 SassScript大多数情况下这样可能还不如使用变量方便但是使用 #{} 可以避免 Sass 运行运算表达式直接编译 CSS。
p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}
编译为
p {font: 12px/30px; }
默认值 !default
$content: First content;
// 如果$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; }
注意变量是 null 空值时将视未赋值会使用默认值。
指令
import
Sass 拓展了 import 的功能允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中另外被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用
通常import 寻找 Sass 文件并将其导入但在以下情况下import 仅作为普通的 CSS 语句不会导入任何 Sass 文件。
文件拓展名是 .css文件名以 http:// 开头文件名是 url()import 包含 media queries。
如果不在上述情况内文件的拓展名是 .scss 或 .sass则导入成功。没有指定拓展名Sass 将会试着寻找文件名相同拓展名为 .scss 或 .sass 的文件并将其导入。
import foo.scss;
或
import foo;
Sass 允许同时导入多个文件例如同时导入 rounded-corners 与 text-shadow 两个文件
import rounded-corners, text-shadow;
导入文件也可以使用 #{ } 插值语句但不是通过变量动态导入 Sass 文件只能作用于 CSS 的 url() 导入方式
$family: unquote(DroidSans);
import url(http://fonts.googleapis.com/css?family\#{$family});
编译为
import url(http://fonts.googleapis.com/css?familyDroidSans);
嵌套 import
大多数情况下一般在文件的最外层不在嵌套规则内使用 import其实也可以将 import 嵌套进 CSS 样式或者 media 中与平时的用法效果相同只是这样导入的样式只能
假设exampple.scss文件内容是下面这样的
.example {color: red;
}
然后导入到 #main 样式内
#main {import example;
}
会被编译为
#main .example {color: red;
}
注意 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 import。
media指令与css中的差不多只不过增加了一些额外功能、比如允许在嵌套中使用
extend指令
在设计网页的时候常常遇到这种情况一个元素使用的样式与另一个元素完全相同但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class一个通用样式一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式一般会这样写
div classerror seriousErrorOh no! Youve been hacked!
/div// 样式如下
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {border-width: 3px;
}
麻烦的是这样做必须时刻记住使用 .seriousError 时需要参考 .error 的样式带来了很多不变智能比如加重维护负担导致 bug或者给 HTML 添加无语意的样式。使用 extend 可以避免上述情况告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {extend .error;border-width: 3px;
}
上面代码的意思是将 .error 下的所有样式继承给 .seriousErrorborder-width: 3px; 是单独给 .seriousError 设定特殊样式这样使用 .seriousError 的地方可以不再使用 .error。
其他使用到 .error 的样式也会同样继承给 .seriousError例如另一个样式 .error.intrusion 使用了 hacked.png 做背景div classseriousError intrusion 也同样会使用 hacked.png 背景。 Class 选择器并不是唯一可以被延伸 (extend) 的Sass 允许延伸任何定义给单个元素的选择器比如 .special.coola:hover 或者 a.user[href^http://] 等例如
.hoverlink {extend a:hover;
}
a:hover {text-decoration: underline;
}
编译为
a:hover, .hoverlink {text-decoration: underline; }
多重延申
.error {border: 1px #f00;background-color: #fdd;
}
.attention {font-size: 3em;background-color: #ff0;
}
.seriousError { extend .error;extend .attention;border-width: 3px;
}
编译为
.error, .seriousError {border: 1px #f00;background-color: #fdd; }.attention, .seriousError {font-size: 3em;background-color: #ff0; }.seriousError {border-width: 3px; }
控制指令
if
当 if 的表达式返回值不是 false 或者 null 时条件成立输出 {} 内的代码
p {if 1 1 2 { border: 1px solid; }if 5 3 { border: 2px dotted; }if null { border: 3px double; }
}
编译为
p {border: 1px solid; }
if 声明后面可以跟多个 else if 声明或者一个 else 声明。如果 if 声明失败Sass 将逐条执行 else if 声明如果全部失败最后执行 else 声明例如
$type: monster;
p {if $type ocean {color: blue;} else if $type matador {color: red;} else if $type monster {color: green;} else {color: black;}
}
编译为
p {color: green; }
for
for 指令可以在限制的范围内重复输出格式每次按要求变量的值对输出结果做出变动。这个指令包含两种格式for $var from start through end或者 for $var from start to end区别在于 through 与 to 的含义当使用 through 时条件范围包含 start 与 end 的值而使用 to 时条件范围只包含 start 的值不包含 end 的值。另外$var 可以是任何变量比如 $istart 和 end 必须是整数值。
for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}
编译为
.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; } each 与 for类似
each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {background-image: url(/images/#{$animal}.png);}
}
编译为
.puma-icon {background-image: url(/images/puma.png); }
.sea-slug-icon {background-image: url(/images/sea-slug.png); }
.egret-icon {background-image: url(/images/egret.png); }
.salamander-icon {background-image: url(/images/salamander.png); }
mixin
混合指令的用法是在 mixin 后添加名称与样式比如名为 large-text 的混合通过下面的代码定义
mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000;
}mixin clearfix {display: inline-block;:after {content: .;display: block;height: 0;clear: both;visibility: hidden;}* html { height: 1px }
}
include引用混合
使用 include 指令引用混合样式格式是在其后添加混合名称以及需要的参数可选
.page-title {include large-text;padding: 4px;margin-top: 10px;
}
编译为
.page-title {font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;padding: 4px;margin-top: 10px; }
也可以在最外层引用混合样式不会直接定义属性也不可以使用父选择器
mixin silly-links {a {color: blue;background-color: red;}
}
include silly-links;
编译为
a {color: blue;background-color: red; }
混合样式中也可以包含其他混合样式比如
mixin compound {include highlighted-background;include header-text;
}
mixin highlighted-background { background-color: #fc0; }
mixin header-text { font-size: 20px; }
混合样式中应该只定义后代选择器这样可以安全的导入到文件的任何位置。
参数
参数用于给混合指令中的样式设定变量并且赋值使用。在定义混合指令的时候按照变量的格式通过逗号分隔将参数写进圆括号里。引用指令时按照参数的顺序再将所赋的值对应写进括号
mixin sexy-border($color, $width) {border: {color: $color;width: $width;style: dashed;}
}
p { include sexy-border(blue, 1in); }
编译为
p {border-color: blue;border-width: 1in;border-style: dashed; }
有时不能确定混合指令需要使用多少个参数比如一个关于 box-shadow 的混合指令不能确定有多少个 shadow 会被用到。这时可以使用参数变量 … 声明写在参数的最后方告诉 Sass 将这些参数视为值列表处理
mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}
.shadows {include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
编译为
.shadowed {-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
参数变量也可以用在引用混合指令的时候 (include)与平时用法一样将一串值列表中的值逐条作为参数引用
mixin colors($text, $background, $border) {color: $text;background-color: $background;border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {include colors($values...);
}
编译为
.primary {color: #ff0000;background-color: #00ff00;border-color: #0000ff;
}
函数指令
Sass 支持自定义函数并能在任何属性值或 Sass script 中使用
$grid-width: 40px;
$gutter-width: 10px;function grid-width($n) {return $n * $grid-width ($n - 1) * $gutter-width;
}#sidebar { width: grid-width(5); }
编译为
#sidebar {width: 240px; }
与 mixin 相同也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句需要调用 return 输出结果。 总结 以上便是我认为关于sass的一些常用知识点暂时就记录这些以后如果有其他常用的再继续补充。
