美文网首页
sass 用法指南(笔记)

sass 用法指南(笔记)

作者: 神刀 | 来源:发表于2015-06-15 17:04 被阅读12次

变量: $blue:#1875e7; .box{color:$blue;}
$r:right; .box{border-#{$r}-radius:5px;}

算术计算: .box{margin:50px*10%;}

包裹嵌套:
元素:body{
.bod{
color:$blue;
}
}

       属性:p{
               background:{
                 color:red;

             }
  }


       $父级:a{
                color:red;
                $:hover{color:yellow}
              }

代码注释: /块注释编译后保留/
// 行内注释忽略省去

样式继承: @extent
classA|classB
classB{@extent .classA} classB继承classA

代码块重用:@mixin
定义:@mixin left($x,$y){float:left; margin-left:$x;margin-top:$y;}
调用:.box{ @include left(20px ,30px); }

颜色: 高亮20% lighten(#333,20%)
变暗 darken()
灰度 grayscale(#333)
complement(#cc3) //#33c

@import 插入外部文件

条件语句:@if{} @else{}
循环语句:@for @while
each命令:作用与for类似

可编写自定义函数
定义:@function double($n){
@return $sn*2;
}

调用:#sidebar{ width:dublue(10px);}

相关文章

  • 【进阶系列】前端开发环境构建(一)CSS -- Sass

    1 CSS 1.1 Sass——css编译器 SASS用法指南 http://www.ruanyifeng.com...

  • sass 用法指南(笔记)

    变量: $blue:#1875e7; .box{color:$blue;}$r:right; ...

  • sass/git/gulp

    sass用法指南sass语法 常用git指令git-book gulp详细入门教程gulp使用指南segmentf...

  • sass用法指南

    介绍 sass 是什么?在sass的官网,它是这么形容给自己的Sass is the most mature, s...

  • SASS用法指南

    一、什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发...

  • Sass用法指南

    作者:阮一峰原文出处:http://www.ruanyifeng.com/blog/2012/06/sass.ht...

  • SASS用法指南

    一.Sass: css预处理器,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。(与其有类似...

  • sass用法指南

    http://www.ruanyifeng.com/blog/2012/06/sass.html[http://w...

  • 资料参考

    sass用法指南--阮一峰ES6入门Flex布局教程Javascript标准参考教程css网格布局

  • SASS用法指南[收藏]

    学过CSS的人都知道,它并不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设...

网友评论

      本文标题:sass 用法指南(笔记)

      本文链接:https://www.haomeiwen.com/subject/kzfsqttx.html