SCSS 环境配置

12次阅读

共计 872 个字符,预计需要花费 3 分钟才能阅读完成。

sass 和 scss 是什么
scss 的历史
2007 年 发行 2016 年 完全成熟
sass 是什么
sass 就是把所有分号冒号都去掉的 css(哈哈哈)
【一本正经】sass 的官方解释器是开源的并且用 Ruby 语言写成的 但是也有用 PHP、C 语言、Java 等实现的版本(C 语言版本叫做 llibSass,Java 语言版本叫做 JSass)SassScript 提供以下功能:变量、嵌套、混入(Mixin)、选择器继承等。
// 就像这样 …(缩进 格式必须这样写)
body
color red

div
color blue

然后呢……大家觉得不好使(最主要是前端工程狮看不懂)就特别不开心 所以就又把分号冒号都加上了……再然后 scss 就出生了
scss 是什么
在 sass 的基础上把分号冒号都加回来其实就是 css 加强版 …
body{
color:red;
}
p{
color blue
}
环境配置
安装 node
必须安装 node(自己百度吧)node 安装完成后 会自带一个 npm yarn 装不装都行 npm 如果处理问题就装个 yarn
查看安装是否成功的方式:1、git bash 里看 2、cmd 的快捷键:键盘上的小旗键 加 R
// 这两个命令都一样:/*
node -v 输入后安回车显示版本
npm -v 输入后安回车显示版本
yarn -v 输入后安回车显示版本

配置淘宝的源
需要配置淘宝的源 http://npm.taobao.org/ 千万不要装 cnpm 如果连接有问题 就百度 npm 淘宝 第一篇文章就可以看到
不会的可以点下面这个链接 https://segmentfault.com/a/11…
安装 http-server
有了淘宝源才能安装
安装它用来查看当前的 html
/* 命令行输入:*/
npm install -g http-server

圈出的这两个用谁都行
获取预览链接
圈出的为预览链接 放入浏览器就能浏览啦它要一直运行 千万不要断 需要写别的命令 就另开一个窗口 ctrl + c 中断运行
工具安装
另开一个命令窗口输入以下代码
// 第一步
npm init -y

// 第二步
npm i -D parcel
//parcel 是代替 webpack 不需要任何配置就能使用 webpack 的工具

正文完
 0