SCSS 环境配置

assace 2019-07-01

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

圈出的这两个用谁都行
SCSS 环境配置

获取预览链接

圈出的为预览链接 放入浏览器就能浏览啦
SCSS 环境配置
它要一直运行 千万不要断 需要写别的命令 就另开一个窗口
ctrl + c 中断运行

工具安装

另开一个命令窗口
输入以下代码

//第一步
npm init -y

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

安装成功后 使用命令 进入你的项目目录
输入以下代码

npx parcel 你的文件名.html

用这个命令就可以把你写的scss sass 自动转为 css

SCSS 环境配置
输入红色网址 即可浏览

如果安装失败
百度搜索:node sass安装失败
自行解决


不想安装 只想学 立刻 马上的那种

真的是懒人必备……
戳这里:
https://codepen.io/pen/

根着红色提示走就好啦
SCSS 环境配置

SCSS 环境配置


本章 完 。


相关推荐