继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

SASS入门学习总结分享

resharpe
关注TA
已关注
手记 102
粉丝 7244
获赞 3476
SASS

get started...

  1. 变量

    定义变量以便于维护

$fontStack: Helvetica, sans-serif; $primaryColor: #333; body { font-family: $fontStack; color: $primaryColor; } // css body { font-family: Helvetica, sans-serif; color: #333; }

  1. 嵌套

    选择器嵌套,层次分明

`
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
//css
nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav li {
display: inline-block;
}

nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
`

  1. 导入

    导入其它sass文件,优于css的@import

//_reset.scss html, body, ul, ol { margin: 0; padding: 0; } //base.scss @import 'reset'; body { font-size: 100% Helvetica, sans-serif; background-color: #efefef; }

  1. mixin

    让css3的编写锦上添花

@mixin box-sizing ($sizing) { -webkit-box-sizing:$sizing; -moz-box-sizing:$sizing; box-sizing:$sizing; } .box-border{ border:1px solid #ccc; @include box-sizing(border-box); } //css .box-border { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

  1. 扩展/继承

    @extend 优雅实现代码组合声明

`
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
//css
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}

.success {
border-color: green;
}

.error {
border-color: red;
}

.warning {
border-color: yellow;
}
`

  1. 四则运算
    `
    .container { width: 100%; }

article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
//css
.container {
width: 100%;
}

article[role="main"] {
float: left;
width: 62.5%;
}

aside[role="complimentary"] {
float: right;
width: 31.25%;
}
`

  1. 颜色变换
    $linkColor: #08c; a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); } } //css a { text-decoration: none; color: #0088cc; } a:hover { color: #006699; }
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP