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

sass基础语法总结分析

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

语法

  1. 文件后缀名
    • sass:不使用{}及;
    • scss:同css,首选
  2. 导入@import

    导入css和css用法一样不再编译,导入scss会合并编译

  3. 注释标准注释/**/,编译到css;单行注释//不编译
  4. 变量

    $开头紧跟变量名,变量名值以:分隔,!表示默认值

`
$fontSize: 12px;
body{
font-size:$fontSize;
}
$baseLineHeight: 2;

$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css
body{
line-height:2;
}
//特殊变量:变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
`

  1. 多值变量

    多值类型分list和map类型,list类似js数组,map类似对象
    `
    $linkColor: #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
    a{
    color:nth($linkColor,1);

    &:hover{
    color:nth($linkColor,2);
    }
    }
    //css
    a{
    color:#08c;
    }
    a:hover{
    color:#333;
    }
    $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
    @each $header, $size in $headings {

    {$header} {

    font-size: $size;
    }
    }
    //css
    h1 {
    font-size: 2em;
    }
    h2 {
    font-size: 1.5em;
    }
    h3 {
    font-size: 1.2em;
    }
    `

  2. 全局变量:!global
  3. 嵌套与挑出@at-root,@at-root (without: ...)和@at-root (with: ...)
  4. 混合@mixin
    `
    @mixin center-block {
    margin-left:auto;
    margin-right:auto;
    }
    .demo{
    @include center-block;
    }
    @mixin opacity($opacity:50) {
    opacity: $opacity / 100;
    filter: alpha(opacity=$opacity);
    }
    @mixin opacity($opacity:50) {
    opacity: $opacity / 100;
    filter: alpha(opacity=$opacity);
    }

//css style
.opacity{
@include opacity; //参数使用默认值
}
.opacity-80{
@include opacity(80); //传递参数
}
//多个参数
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
@include horizontal-line($padding:15px);
}
//@content
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
}

@include max-screen(480px) {
body { color: red }
}
`

  1. 继承@extent
  2. 占位选择器%

    如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中
    不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。

`
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
%clearfix{
@if $lte7 {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0 a;
}
&:after {
clear: both;
}
}

header{

h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css

header h1,

.ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
`

  1. 函数
    `
    $baseFontSize: 10px !default;
    $gray: #ccc !defualt;

// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}

body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
`

  1. 运算
    $baseFontSize: 14px !default;
    $baseLineHeight: 1.5 !default;
    $baseGap: $baseFontSize * $baseLineHeight !default;
    $halfBaseGap: $baseGap / 2 !default;
    $samllFontSize: $baseFontSize - 2px !default;

//grid
$_columns: 12 !default; // Total number of columns
$_column-width: 60px !default; // Width of a single column
$_gutter: 20px !default; // Width of the gutter
$_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width

  1. 条件和循环
    $lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1; } } p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //css .ib{ display:inline-block; *display:inline; *zoom:1; } p { color: green; } //三目运算 if($condition, $if_true, $if_false) //for:@for $var from <start> through <end>和@for $var from <start> to <end> @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //css .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } //each:@each $var in <list or map> $animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP