Windows搭建sass环境详细教程

1.首先下载Ruby 官方网址 https://rubyinstaller.org/downloads/
点击下载
在这里插入图片描述
往下拉
点击下载
在这里插入图片描述
下载后的文件
在这里插入图片描述
先安装ruby 带光碟那个
点击同意
在这里插入图片描述

一直next
安装完成后的页面
在这里插入图片描述
为ruby配置环境变量
找到你ruby的安装目录
我的安装目录是
E:\Ruby27-x64\bin
将ruby的bin目录添加环境变量
在这里插入图片描述
添加成功后 打开命令行输入
ruby -v 查看是否安装成功
在这里插入图片描述
接下来安装开发包
在这里插入图片描述
选择解压路径
在这里插入图片描述
解压完成后 命令行进入到刚才的解压目录
在这里插入图片描述
使用命令生成 config.yml 配置文件
ruby db.rb init
在这里插入图片描述
查看目录的配置文件 是否有ruby的安装路径,如果没有自己添加
在这里插入图片描述
依次输入命令
ruby dk.rb install
ruby dk.rb review
ruby dk.rb init
在这里插入图片描述
到此ruby 安装完成 接下来安装sass

使用命令切换镜像
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org
gem sources -l
在这里插入图片描述
输入下面命令安装sass
gem install sass
检查sass是否安装
sass -v
在这里插入图片描述
到此安装完成。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS并使其更加灵活和易于维护。 以下是一些基本的Sass知识和语法: 1. 变量:使用$符号来定义一个变量,例如:`$primary-color: #333;`。然后可以在代码中使用这个变量来代替颜色值。 2. 嵌套:Sass允许嵌套CSS规则,例如: ``` nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; } } } ``` 这将编译为以下CSS: ``` nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { display: inline-block; } ``` 3. Mixins(混合器):Mixins是一种可重用的代码块,可以在代码中多次使用。例如: ``` @mixin center { display: flex; justify-content: center; align-items: center; } .btn { @include center; background-color: $primary-color; color: white; padding: 10px 20px; } ``` 这将在.btn类中使用center mixin,并编译为以下CSS: ``` .btn { display: flex; justify-content: center; align-items: center; background-color: #333; color: white; padding: 10px 20px; } ``` 4. 继承:使用@extend关键字来继承一个CSS规则。例如: ``` .btn { background-color: $primary-color; color: white; padding: 10px 20px; } .btn-primary { @extend .btn; border-radius: 5px; } ``` 这将使.btn-primary类继承.btn类,并添加一个圆角边框。 5. 条件语句:使用@if和@else关键字来创建条件语句。例如: ``` @if lightness($primary-color) > 50 { background-color: black; color: white; } @else { background-color: white; color: black; } ``` 这将根据$primary-color变量的亮度来设置背景颜色和文本颜色。 以上是一些Sass的基本知识和语法。了解这些后,你就可以开始使用Sass来编写更好维护和可重用的CSS代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值