-
- 木木得木木 2018-07-27
scss四种编译格式
expanded nested compact compressed
-
截图0赞 · 0采集
-
- 木木得木木 2018-07-27
if
if not
else
media
-
截图0赞 · 0采集
-
- 木木得木木 2018-07-27
at-root
在SCSS中嵌套，使用
@at-root内联选择器模式，编译出来的CSS无任何嵌套，让代码更加的简单。回到SCSS中的嵌套中，如果不使用@at-root内联选择器模式，将会按代码的层级关系一层一层往下嵌套。如上例，将用例中的@at-root去掉之后，将会编译出像下面的CSS代码（了解过Sass）的同学，一点都不会觉得奇怪。
.bar { color: gray; }button { color: red; }span { color: orange; }-
截图0赞 · 0采集
-
- 慕粉3553507 2018-06-14
sass中的media query可以内嵌在css规则中，在生成css的时候才会被提到样式的最高层。
在嵌套的时候使用sass@at-root指令，被嵌套的内容输出到最高层。
内置type-of(), unitless(), unit()单位判断， not操作符，percentage()百分比，@warn,@error
- 0赞 · 0采集
-
- 倔强的小Web 2018-01-28
- 老师讲的都是干货，不是专挑简单的讲，认真负责，谢谢
-
截图0赞 · 0采集
-
- winteronlyme_me 2017-12-19
- 在嵌套的时候明确声明at-root指令，嵌套的内容输出到样式层的顶层
-
截图0赞 · 0采集
-
- winteronlyme_me 2017-12-19
- 嵌套的副作用
-
截图0赞 · 0采集
-
- winteronlyme_me 2017-12-19
- sass中的@media好处
-
截图0赞 · 0采集
-
- winteronlyme_me 2017-12-19
- sass中的@media跟css区别
-
截图0赞 · 0采集
-
- dabear 2017-11-18
- 一个数值在变成百分号表示时，会变成原来的100倍
-
截图0赞 · 0采集
-
- dabear 2017-11-18
- 在选择器属性名或字符串中使用变量名，需要 #{$variable} 的方式引用
-
截图0赞 · 0采集
-
- dabear 2017-11-18
- 使用@at-root 明确输出到样式顶层
-
截图0赞 · 0采集
-
- dabear 2017-11-18
- 但不使用嵌套不易维护——使用@at-root指令
- 0赞 · 0采集
-
- dabear 2017-11-18
- 避免嵌套的做法
-
截图0赞 · 0采集
-
- dabear 2017-11-18
- 嵌套的副作用
-
截图0赞 · 0采集
-
- dabear 2017-11-18
- 浏览器在解析一个CSS选择器的时候，是按照从右往左的顺序解析的
- 0赞 · 0采集
-
- dabear 2017-11-18
- 屏幕大于768px时，width 设为 50%；小于768px时，没有设置，默认为 100%
-
截图0赞 · 0采集
-
- dabear 2017-11-18
- sass中的@media跟CSS的区别（media query）
-
截图0赞 · 0采集
-
- bridget314 2017-10-19
- col-sm
-
截图0赞 · 0采集
-
- qq_专属人生S_0 2017-09-22
- sass内置函数unit(数值)判断数值单位
- 0赞 · 0采集
-
- qq_专属人生S_0 2017-09-22
- sass内置函数percentage（数值）把数值转换成百分比
- 0赞 · 0采集
-
- qq_专属人生S_0 2017-09-22
- sass内置函数unitless（数值）判断数值是否带有单位
- 0赞 · 0采集
-
- qq_专属人生S_0 2017-09-21
- 引用sass变量，#{变量名}
- 0赞 · 0采集
-
- qq_专属人生S_0 2017-09-21
- sass内置检验函数“type-of”检验一个数值为，什么类型。数值为number
- 0赞 · 0采集
-
- qq_专属人生S_0 2017-09-21
- @media为查询
- 0赞 · 0采集
-
- qq_专属人生S_0 2017-09-21
- 嵌套中为了不生成组合选择器就用@at-root{}，输出样式默认在文件底部
- 0赞 · 0采集
-
- milaiduoduo 2017-03-29
- sass中的响应式书写
-
截图0赞 · 0采集
-
- a凯裙 2017-03-28
- sass中的@media跟css的区别： ·sass@media可以内嵌在css规则中 ·最后编译后会被提取到样式的最高级别 好处：避免重复书写选择器和打乱样式表 @mixin col-sm($width:50%){ @if type-of($width)!=number{ @error "$width必须是一个数值类型，你输入的width是： #{($width)}"; } @if not unitless($width){//sass的内置函数，判断输入的数值是否有单位 @if unit($width) != "%"{ @error "$width必须是一个百分值，你输入的width是： #{($width)}"; } }@else{ @warn "$width应该是一个百分值，你输入的width是: #{$width}."; $width:percentage(($width)/100); @media(min-width:768px){ width:$width; float:left; } } 可以运用@at-root使样式表
- 0赞 · 0采集
-
- zifeiyu666 2017-03-26
- font:{ family:arial; size:16px }
- 0赞 · 0采集
-
- zifeiyu666 2017-03-26
- @at-root{这里的样式将被提升到最外层，以提高样式渲染效率}
- 0赞 · 0采集
数据加载中...