sass、scss

最新推荐文章于 2024-08-02 12:19:30 发布

超cccccccc

最新推荐文章于 2024-08-02 12:19:30 发布

阅读量323

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_48873376/article/details/108290646

版权

sass基于Ruby语言开发，所以在安装sass前需要安装Ruby,安装时需要注意勾选Add Ruby executables to your PATH添加系统环境变量

在有Ruby之后在vsCode中直接使用gem install sass、gem install compass来进行安装。

SASS转换成CSS有两种可以使用 sass sass文件路径需要导出到的css路径或者sass sass–watch 文件路径需要导出到的css路径，在使用SASS导出时路径不要允许出现中文，否则会报错。

它是一种高于CSS的语言，他能清晰、结构化地描述样式，所以在使用时他比CSS更好，比CSS更加强大。他的扩展名都是.sass，它使用时没有大括号，它是以空格来区分属性和选择器的，属性和属性值中间需要隔一个空格。

$num = 100;
div 
     width: $num//写入语法时一定要注意空格的使用，属性值前一定要有空格，不然就会报错。
     height: $num
     background-color: blue

SCSS是SASS 3 引入的新语法，是css3语法的超集，也就是所有有效CSS3样式也是同样适合于SASS,他的扩展名是.scss,他就可以使用花括号，这样就和我们写

$num:50px;
div{
   
    width:$num;
    height: $num;
    background-color: blue;
}

它的写法很贴近CSS，所以更适合我们去使用，SCSS就是SASS的升级版。

变量的声明

$color:red;
$width:300;//直接使用$符号来声明变量，后面用冒号连接。

选择器的嵌套

div{
   
   span{

关注