assace 2019-07-01
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 的工具
安装成功后 使用命令 进入你的项目目录
输入以下代码
npx parcel 你的文件名.html
用这个命令就可以把你写的scss sass 自动转为 css
输入红色网址 即可浏览
如果安装失败
百度搜索:node sass安装失败
自行解决
真的是懒人必备……
戳这里:
https://codepen.io/pen/
根着红色提示走就好啦
本章 完 。