scss语法

scss 2019 

scss 是一种动态css 语言

  1. 混合宏
  2. 继承
  3. 占位符
  4. 嵌套  Class中嵌套class,从而减少重复的代码
  5. 运算  CSS中用上数学表达式
  6. 颜色功能 可以编辑颜色
  7. 名字空间(namespace) 分组样式,从而可以被调用
  8. 作用域 局部修改样式
  9. JavaScript 赋值 在CSS中使用JavaScript表达式赋值


和less区别

  1. 变量在Less和Sass中的唯一区别就是Less用@,Sass用$
  2. Less是基于JavaScript 实现的,是在客户端处理的
  3. Sass是基于Ruby实现的,是在服务器端处理的

注释(less-js)

// 但这种不会被编译的注释
/*会被编译的注释*/


数据类型


scss 2012

scss  是一种编写css 的预编译器 

  1. 嵌套  简化 css 代码量
  2. 选择器  &父选择器
  3. 命名空间
  4. 定义变量  $开头定义 css 全局变量
  5. 插值语法   #{$attr}
  6. 继承 @extend
<style lang="scss" scoped>
    @import "~@assets/styles/define.scss";
</style>
/* 
嵌套:内层的样式将它外层的选择器作为父选择器
*/
.sign {
    * {
        user-select: none;
        outline: none;
      }
}
/*
父选择器&:用 & 代表嵌套规则外层的父选择器
|| .sign-container-form .item-code{}
*/ 
.sign-container-form {
  .item {
    &-code { input{width: 221px;}}
  }
}
/*
css 命名空间管理
font-family
font-size
font-weight
*/ 
.funky {
  font: 20px/24px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/*
Sass 额外提供了一种特殊类型的选择器:占位符选择器
必须通过 @extend 指令调用
*/ 
/*
变量 $ 
嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),
不在嵌套规则内定义的变量则可在任何地方使用(全局变量)
将局部变量转换为全局变量可以添加 !global 声明
*/ 
/*
数据类型
数字,1, 2, 13, 10px
字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
颜色,blue, #04a3f9, rgba(255,0,0,0.5)
布尔型,true, false
空值,null
数组 (list),
用空格或逗号作分隔符,1.5em 1em 0
2em, Helvetica, Arial, sans-serif
maps, 
相当于 JavaScript 的 object,(key1: value1, key2: value2)
*/ 
/*
SassScript 支持数字的加减乘除、取整等运算
(+, -, *, /, %)
*/ 
/*
插值语句 #{}
*/ 
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/*
一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式
@extend 继承
*/ 
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}


  
   


参考链接

http://www.ruanyifeng.com/blog/2012/06/sass.html  2012 年教程

https://blog.csdn.net/Ginny_2017/article/details/100007285   2019 年
   

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

良言SE

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值