sass语法

1.安装

2.Webstorm下设置sass

3.变量

1.以$开头;后边紧跟变量名;
例如:
1.1普通变量
$color:#333
.con{
    background:$color;
}
1.2特殊变量
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
例如:
$position:top;
.header{
      margin-#{$position}:20px
}

4.计算功能

body{
    margin:(14px/2);
    top:50px+100px;
    right:$value*5;
}

5.嵌套

5.1选择器嵌套
例如:
div h{
      font-size:16px;
}
可以用sass写法:
div{
        h{
            font-size:16px;
            &:hover{
                  color:red;
              }
      }
}
5.2属性嵌套
例如:
.con{
   border:{
      style:solid;
      left:{
          width:2px;
          color:red;
          }
       right:{
          width:2px;
          color:blue;
          }
    }

6.继承

例如:
.class1{
            border: 1px solid #333;
        }
        .class2{
            @extend .class1;
            font-size: 12px;
        }

7.混合

例如:
@mixin left{
            float:left;
            background:red;
        }
        .class1{
            border: 1px solid #333;
            @include left;
        }
//强大之处在与其方法是可以传参的;同样也可以传多个参数;
@mixin left($color:red;$f_float:left){
            float:$f_float;
            background:$color;
        }
        .class1{
            border: 1px solid #333;
            @include left(green,left);
        }

8.插入文件:使用@import命令,用来插入外部文件;

例如:
@import “name.scss”

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开心的学习之路

JavaScript概览

近日的项目需要用JavaScript完成,于是决定通读《JavaScript高级程序设计第三版》,书是2012年的,比较老了,但是可以用来快速了解JavaScr...

30240
来自专栏小灰灰

SPI框架实现之旅四:使用测试

SPI框架实现之旅四:使用测试 前面三篇主要是介绍如何设计的,如何实现的,这一篇,则主要集中在如何使用。实现得再好,如果不好用,也白搭 本篇介绍几个简单的使用...

21880
来自专栏对角另一面

读 Zepto 源码之集合元素查找

这篇依然是跟 dom 相关的方法,侧重点是跟集合元素查找相关的方法。 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zept...

23300
来自专栏Golang语言社区

厚土Go学习笔记 | 16. go语言有指针 没有指针运算

指针内其实就是保存了一个变量地址。 var p *int 这行代码声明了一个 int 类型的指针 p i := 42 p = &i & 符号是取地址符,&i 代...

360100
来自专栏拭心的安卓进阶之路

JavaScript 的闭包用于什么场景

本文翻译自 MDN ( Mozilla Developer Network ): 原文地址:MDN 译文地址:shixinzhang 的博客 词法作用域 考虑如...

23880
来自专栏技术小站

SpringMVC:数据绑定入门(-)

1.数据类型,可以绑定基本数据类型,如int age,或者包装类型如:Integer age;

32920
来自专栏地方网络工作室的专栏

GO语言学习笔记(一)一些基础常识以及实现生成随机密码小程序

GO语言学习笔记(一)一些基础常识以及实现生成随机密码小程序 之前用 nodejs 和 shell 分别实现过生成随机密码的小程序。最近,准备入门一下 gola...

22260
来自专栏领域驱动设计DDD实战进阶

13-TypeScript单例模式

在JavaScript中,要实现设计模式比较复杂。而在TypeScript中因为使用面向对象的思想编程,要实现设计模式的方式与后端语言C#、Java等非常类似。...

33650
来自专栏Golang语言社区

Golang语言-- 小技巧

.前言 Golang 开发过程中的一些小技巧在这里记录下。 2.内容 1)包的引用 经常看到Golang代码中出现 _ "controller/home" 类似...

36690
来自专栏Nian糕的私人厨房

Type Script 的基本概念及常用语法

TypeScript 是一种由微软开发的自由和开源的编程语言,它作为 JavaScript 的一个超集,扩展了JavaScript 的语法,而且本质上向这个语言...

13530

扫码关注云+社区

领取腾讯云代金券