前言
sCSS 作为 sass 的升级, 兼容了 css3 的属性, 今天我们就来讲解一下如何使用 scss 语法, 关于 scss 如何编译等问题, 这里不会多说, 主要以语法为重.
基础语法
1. 声明变量, 使用变量.
- // 例 1
- $baseFontSize: 20px;
- header ~ p{font-size: $baseFontSize;}
- // 例 2
- $baseImgUrl: '../images/';
- background: url($baseImgUrl + 'xxx.png');
2. Css 规则嵌套
- // 一般情况
- #content article h1 { color: #333 }
- #content article p { margin-bottom: 1.4em }
- #content aside { background-color: #EEE }
- // Scss 语法
- #content {
- article {
- h1 { color: #333 }
- p { margin-bottom: 1.4em }
- }
- aside { background-color: #EEE }
- }
3. 父选择器标识符
- /* ------ 例 1 -------- */
- // 一般情况
- article a {
- color: blue;
- }
- article a:hover {
- color: red
- }
- // Scss 语法
- article a {
- color: blue;
- &:hover { color: red }
- }
- /* ------ 例 2 -------- */
- // 一般情况
- #content aside {color: red};
- body.ie #content aside { color: green }
- // Scss 语法
- #content aside {
- color: red;
- body.ie & { color: green }
- }
4. 群组选择器嵌套
- // 一般情况
- .container h1, .container h2, .container h3 { margin-bottom: .8em }
- // Scss 语法
- .container {
- h1, h2, h3 {margin-bottom: .8em}
- }
5. 子选择器和同层组合选择器
- // 一般语法
- article ~ article { border-top: 1px dashed #ccc }
- article> section { background: #eee }
- article dl> dt { color: #333 }
- article dl> dd { color: #555 }
- nav + article { margin-top: 0 }
- // Scss 语法
- article {
- ~ article { border-top: 1px dashed #ccc }
- > section { background: #eee }
- dl> {
- dt { color: #333 }
- dd { color: #555 }
- }
- nav + & { margin-top: 0 }
- }
6. 嵌套属性
- /* ------ 例 1 -------- */
- // 一般情况
- nav {
- border-style: solid;
- border-width: 1px;
- border-color: #ccc;
- }
- // Scss 语法
- nav {
- border: {
- style: solid;
- width: 1px;
- color: #ccc;
- }
- }
- /* ------ 例 2 -------- */
- // 一般情况
- nav {
- border: 1px solid #ccc;
- border-left: 0px;
- border-right: 0px;
- }
- // Scss 语法
- nav {
- border: 1px solid #ccc {
- left: 0px;
- right: 0px;
- }
- }
7. 默认变量值
- /* ------ 例 1 -------- */
- $baseFontSize: 20px !default;
- div{
- font-size: $baseFontSize; // 20px
- }
- /* ------ 例 2 -------- */
- $baseFontSize: 50px;
- $baseFontSize: 20px !default;
- div{
- font-size: $baseFontSize; // 50px
- }
- /* ------ 例 3 -------- */
- $baseFontSize: 20px !default;
- $baseFontSize: 50px;
- div{
- font-size: $baseFontSize; // 50px
- }
8. 导入和嵌套导入 scss 文件
- // 导入
- @import "xxx";
- // 嵌套导入
- // ipt.scss 文件内容 background: #000;
- .blue-theme {
- aside {
- @import "ipt.scss"; // 此处引入 ipt 样式文件
- }
- }
- // 渲染结果
- .blue-theme {
- aside {
- background: #000;
- }
- }
9. 什么情况会导致 Scss 把 @import 理解成 css 原生的 @import?
1. 被导入文件的名字以. css 结尾;
2. 被导入文件的名字是一个 URL 地址 (比如 http://www.sass.hk/css/css.css), 由此可用谷歌字体 API 提供的相应服务;
3. 被导入文件的名字是 CSS 的 url() 值.
4. 那么如何解决无法引入 css 文件?
解答: 将 css 后缀修改成 scss 后缀, 因为 scss 完全支持 css.
10. 静默注释
- // css 文件的注释都是 /* xxx */ 这种方式来书写注释内容
- // Scss 文件在原有的基础上新增了 // 作为注释符号
例 1:
- body{
- padding: 0; // 12121212
- margin: 0; /* 123 */
- }
编译成 css 后:
- body {
- padding: 0;
- margin: 0;
- /* 123 */
- }
区别:// 是静默注释, 编译成 css 的时候不会出现在 css 文件中.
11: 混合器
- // 文件中大量重复数据我们可以用变量来完成, 但是如果有大段大段的内容时, 我们的独立变量就没法完成这种功能了, 那么我们就需要使用混合器了.
- /* ------ 例 1-------- */
- @mixin borderRadius{ // 固定值
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- }
- /* ------ 例 2-------- */
- @mixin borderRadius($br){ // 传参, 但不设置默认值
- -webkit-border-radius: $br + px;
- -moz-border-radius: $br + px;
- border-radius: $br + px;
- }
- /* ------ 例 3-------- */
- @mixin borderRadius($br: 10){ // 传参, 默认值为 10px
- -webkit-border-radius: $br + px;
- -moz-border-radius: $br + px;
- border-radius: $br + px;
- }
引用:@include
- #container{
- @include borderRadius;
- }
- #container{
- @include borderRadius(5);
- }
12. 样式继承
- // 继承: @extend
- #conatiner{
- width: 200px;
- height: 200px;
- background: skyblue;
- }
- #box{
- @extend #conatiner;
- background: pink;
- }
结束语
最终, Scss 入门语法就这些了, 对于最后我们讲解的 @minix 和 @extend 有时候很相似, 那我们应该选择哪一个呢? 答案是大家都大部分使用 @minix 多于 @extend, 如果喜欢使用 @extend 的小伙伴们, 切记, 如果当样式和选择器之间在某些方面比较亲密的时候, 推荐使用 @extend, 其他时候, 都推荐使用 @minix, 因为 @minix 更加的灵活!
说明
原创作品, 禁止转载和伪原创, 违者必究!
来源: http://www.jianshu.com/p/31f20db8b716