SCSS迷你书(下) - SCSS中@指令
2016-03-01 17:50
661 查看
@import
指令
SCSS的@import是css的加强版本,共有以下几种方式可以互相导入引用;
注意点
- 可以使用相对路径
- 导入的文件可以.scss后缀名
- 可以引入线上的scss文件
- 支持括入引入的写法
- 在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如,
_navbar.scss 不能与 navbar.scss 并存。 - 支持引入带下划线和不带下划线的文件;比如(navbar和_navbar) - 若是文件命名**带下划线**则不编译该文件,但却可以正常把样式导入其他文件用(如index.scss
引入_navbar
,只产生index.css
) - 若是文件命名*不带下划线**,两者皆会编译,产生CSS文件((如index.scss
引入navbar
,会产生index.css
和navbar.css`))
- 支持在CSS 规则 和 @media 规引入样式
@import "navbar.scss"; //直观的引入单一文件 @import "footer" ; @import "http://test.xx/sidebarbar"; @import url(foo); @import "navbar","sidebar","header","footer"; //直接导入多个文件 .test{ @import "widget"; }
@media
指令
sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面.sidebar { width: 300px; @media screen and (max-width: 1920px) { width: 600px; } } /* .sidebar { width: 300px; } @media screen and (max-width: 1920px) { .sidebar { width: 600px; } } */
@extend
指令
Sass 中的 @extend 是用来扩展选择器或占位符。.btn{ height:2rem; line-height:2rem; text-align:center; width:5rem; } %btna{ height:5rem; line-height:5rem; text-align:center; width:5rem; } .btn-block{ @extend .btn; display:block; width:100%; } .btn-square{ @extend %btna; } /* .btn, .btn-block { height: 2rem; line-height: 2rem; text-align: center; width: 5rem; } .btn-square { height: 5rem; line-height: 5rem; text-align: center; width: 5rem; } .btn-block { display: block; width: 100%; } */
@at-root
指令
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。.layer1 { color: red; .layer2 { color: orange; @at-root .layer3 { } } } /* .layer1 { color: red; } .layer1 .layer2 { color: orange; } */
@debug
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后在命令终端会输出你设置的提示 Bug:
@debug 10em + 12em;
会输出:
Line 1 DEBUG: 22em
@warn
和@error
这两个也是方便调试用的,显示警告信息和错误信息…..类似JS的console.log();
相关文章推荐
- SCSS迷你书(下) - SCSS中@指令
- SCSS迷你书(上)
- SCSS迷你书(上)
- css背景设置,让套图中某张图片居中显示的例子
- HTML+CSS学习笔记 (7) - CSS样式基本知识
- 通过CSS让html网页中的内容不可选
- 利用css实现文本超出N行之后显示省略号等css常用小知识点
- Css 截取字符串长度
- CSS/CSS3常用Style
- CSS 外边距(margin)重叠及防止方法
- CSS样式使HTML标签占满父容器的方法
- 关于使用JS动态修改CSS样式问题
- 使用css让大图片不超过网页宽度
- IE6最小高度最小宽度最大高度最大宽度css写法
- 发送邮件网页样式乱了。
- 用CSS3做3D动画的那些事
- 遮罩层(JS+CSS)
- 基于CSS3实现立方体自转效果
- CSS3:选择器
- CSS3文本溢出显示省略号