最近更新
阅读排行
关注本站

浅析sass(二)变量

阅读:3633 次   编辑日期:2015-08-23

目录:

概述:

在我接手新公司工作之后,发现都是坑,代码不规范,css有的直接写文件里,有的写css文件,有的用sass,用的sass之后的文件后台同事也不会改还得我来,建议大家写代码的时候要用一个统一的规范,没有规矩不成方圆。
今天我们继续sass,之前讲了一些很入门的东西,今天我们来初步步讲一下sass中的变量。

基本变量:

sass的变量以$开头,变量值和变量名之间就需要使用冒号(:)分隔开
   $fontSize: 12px;
    body{
        font-size:$fontSize;
    }

    //css style
    //-------------------------------
    body{
        font-size:12px;
    }

特殊变量:

但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用,例如border-top中的top等。
    //sass style
    //-------------------------------
    $borderDirection:       top !default;
    $baseFontSize:          12px !default;
    $baseLineHeight:        1.5 !default;

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

    //css style
    //-------------------------------
    .border-top{
      border-top:1px solid #ccc;
    }
    body {
      font: 12px/1.5;
    }
将本篇文章分享到:
top