码迷,mamicode.com
首页 > 其他好文 > 详细

Sass--运算

时间:2017-07-14 18:07:58      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:play   数值   logs   har   img   str   技术   set   png   

数值运算

body{
    height: 800px;
    $smallBlockWidthAndHeight: 100px;

    .outside{
        background: gray;
        height: 500px;
        .smallBlock{
            width: $smallBlockWidthAndHeight;
            height: $smallBlockWidthAndHeight;
            background: red;
            display: inline-block;
            margin-left: 5px;
        }

        .resultBlock{
            width: $smallBlockWidthAndHeight / 2;
            height: $smallBlockWidthAndHeight / 2;
            background: blue;
            display: inline-block;
            margin-left: 5px;
        }
    }
}

 

技术分享

 

 

字符串运算

实例 1

body{
    // $str: "70px" + "80px";
    $str: 70px + 80px;
    .outside{
        width: 500px;
        height: 300px;
        background: gray;

        margin-left: $str;
    }
}

 

编译后

body .outside {
  width: 500px;
  height: 300px;
  background: gray;
  margin-left: 150px; }

 

 

实例 2

body{
    $str: "70px" + "80px";
    .outside{
        width: 500px;
        height: 300px;
        background: gray;

        margin-left: $str;
    }
}

 

编译后

body .outside {
  width: 500px;
  height: 300px;
  background: gray;
  margin-left: "70px80px"; }

 

 

实例 3 

body{
    .outside{
        width: 500px;
        height: 300px;
        background: gray;

        &:after{
            content: "边距是:\"" + (70px + 80px) + "\"";
        }
    }
}

 

编译后

@charset "UTF-8";
body .outside {
  width: 500px;
  height: 300px;
  background: gray; }
  body .outside:after {
    content: ‘边距是:"150px"‘; }

 

 

可以看出来,这个规则和JS运算挺像的

Sass--运算

标签:play   数值   logs   har   img   str   技术   set   png   

原文地址:http://www.cnblogs.com/jiaoxuanwen/p/7171635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!