sass学习笔记
Jasminecjc
想起来了就会十几篇原创博客的搬运,没想起来大半年不更
展开
-
sass笔记之嵌套
选择器嵌套:nav { a { color: red; header & { color:green; } } }==nav a{ color: red;}header nav a { color: green;}属性嵌套:nav a{ font{ si原创 2016-02-28 14:48:05 · 373 阅读 · 0 评论 -
sass @media
@mediaSass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。来看一个简单示例:.sidebar { width: 300px; @media screen and (orientation: landscape) {原创 2016-02-28 15:11:59 · 1822 阅读 · 0 评论 -
sass @import 规则
@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:如果文件的扩展名是 .css。如果文件名以 http:// 开头。如果文件名是 url()。如果 @import 包含了任何媒体查询(media queries)。如果上述情况都没有出现,并且扩展名是 .scss 或 .sass原创 2016-02-28 15:10:26 · 20102 阅读 · 0 评论 -
sass 颜色函数
rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;red($color):从一个颜色中获取其中红色值;green($color):从一个颜色中获取其中绿色值;blue($color):从一个颜色中获取其中蓝色值;mix($color-1,$color-2,[$weigh原创 2016-02-28 15:09:37 · 1144 阅读 · 0 评论 -
sass (map)
map-get($map,$key):根据给定的 key 值,返回 map 中相关的值。map-merge($map1,$map2):将两个 map 合并成一个新的 map。map-remove($map,$key):从 map 中删除一个 key,返回一个新 map。map-keys($map):返回 map 中所有的 key。map-values($map):返回 map 中所有的 value原创 2016-02-28 15:03:20 · 523 阅读 · 0 评论 -
sass列表函数
列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值; nth($list, $n):返回一个列表中指定的某个标签值 join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表; append($list1, $val, [$separator])原创 2016-02-28 15:00:59 · 481 阅读 · 0 评论 -
sass函数功能(字符串和数字)
unquote : 删除字符串最前最后的引号quote : quote() 函数刚好与 unquote() 函数功能相反,主要用来给字符串添加引号。如果字符串,自身带有引号会统一换成双引号 ""。使用 quote() 函数只能给字符串增加双引号,而且字符串中间有单引号或者空格时,需要用单引号或双引号括起,否则编译的时候将会报错。同时 quote() 碰到特殊符号,比如:原创 2016-02-28 15:00:19 · 1110 阅读 · 0 评论 -
sass循环
@for循环两种方式:@for $i from through @for $i from to through 和 to 区别:through包含end,to不包含原创 2016-02-28 14:59:38 · 475 阅读 · 0 评论 -
sass运算
加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算。如:.box { width: 20px + 8in;}编译出来的 CSS:.box { width: 788px;}但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示:.box { width: 20px + 1em;}Sa原创 2016-02-28 14:58:46 · 694 阅读 · 0 评论 -
sass数据类型
数字: 如,1、 2、 13、 10px; 字符串:有引号字符串或无引号字符串,如,"foo"、 'bar'、 baz; 颜色:如,blue、 #04a3f9、 rgba(255,0,0,0.5); 布尔型:如,true、 false; 空值:如,null; 值列表:用空格或者逗号分开,如,1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。原创 2016-02-28 14:57:06 · 685 阅读 · 0 评论 -
sass插值
$properties: (margin, padding);@mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; }}.login-box { @include set-value(top, 14px);}不原创 2016-02-28 14:56:13 · 450 阅读 · 0 评论 -
sass笔记之开始
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。不同样式风格的输出方法:原创 2016-02-28 14:55:04 · 453 阅读 · 0 评论 -
sass(混合宏vs继承vs占位符)
如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承。占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中原创 2016-02-28 14:53:41 · 422 阅读 · 0 评论 -
sass继承 %占位符placeholder
使用方法:“.btn{ color: red;}.btn-primary{ @extend .btn;}占位符:%btn{ color: red;}.btn{ @extend %btn;} %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码通过 @原创 2016-02-28 14:52:34 · 503 阅读 · 0 评论 -
sass混合宏
声明带参数的混合宏@mixin border-radius($radius:5px){ border-radius: 5px;}调用混合宏:button{ @include border-radius;}混合宏的不足之处:Sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合原创 2016-02-28 14:50:17 · 445 阅读 · 0 评论 -
sass @extend
扩展单一选择器前面我们知道 %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。比如下面的代码:#context a%extreme { color: blue; font-weight: bold; font-size: 2em;}这段代码在不调用之前不产生任何代码,只有能过@extend调用之后才生成代码原创 2016-02-28 15:13:46 · 571 阅读 · 0 评论