Mac安装Sass介绍

由于Sass是用Ruby语言开发出来的,所有安装Sass必须先安装Ruby,但是Mac自带Ruby,执行以下命令查看版本

ruby -v

使用Ruby的gem软件包管理工具执行以下命令

gem install sass

安装好Sass之后执行命令查看版本信息

sass -v

Sass的文件的后缀名有两种形式:.sass和.scss。这两种的区别在于.sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。常用的是Scss文件格式

Scss文件代码

.a {  
    color: blue;  
    font-weight: bold;  
    text-decoration: underline;  
    .b {  
        color: black;  
    }  
} 

Sass代码

.div  
 color: blue  
 .b  
  color: black  
  font-weight: bold  
  text-decoration: none  
  .c  
   color: white  

编译Sass方式有很多种,例如koala,nodejs,在线编译,编辑器插件编译等等,这里介绍的是使用命令行

Sass四种编译风格

  1. nested 嵌套缩进分隔(默认)

    //sass --watch style.scss:style.css --style nested
    
    #main {
      col
Visual Studio Code(简称VSCode)是一款非常流行的开源代码编辑器,它支持各种语言和扩展,包括Sass。如果你想在VSCode中安装并使用Sass编译器,你可以按照以下步骤操作: 1. **打开VSCode**:首先,确保你已经安装了最新版本的VSCode。 2. **扩展市场搜索**: 在VSCode的左上角,点击"扩展"图标(形状像齿轮),进入扩展商店页面。 3. **搜索Sass扩展**:在搜索框中输入"CSS"或"Sass",然后找到官方的 "Sass" 扩展,其名称可能为 "vetur" 或者 "SASS Language Support"(取决于开发者)。另一个常用的扩展是 "Live Sass Compiler"。 4. **安装扩展**:点击你找到的Sass扩展,然后点击"安装"按钮进行下载和安装安装完成后,你会看到一个新的Sass语法高亮和支持选项。 5. **配置Sass编译器**:安装后,你可能需要在设置中配置Sass编译器。可以通过以下路径打开设置:`File` > `Preferences` > `Settings` 或者使用快捷键 `Ctrl + ,` (Windows/Linux) 或 `Cmd + ,` (Mac)。 - 添加一个名为 "path" 的配置项,指向你的Sass命令行工具(如Node.js的`sass`命令)的位置,或者如果使用的是Webpack等构建工具,配置相应的构建脚本路径。 6. **启用Sass支持**:确保你在文件夹属性中开启了对`.scss`或`.sass`文件的支持,通常可以在设置中找到对应的选项。 完成以上步骤后,你应该能在VSCode中编写、保存和实时预览Sass样式,并能够通过点击运行按钮或使用快捷键自动编译成CSS。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值