目录
1、安装sass
1.先安装node 检查 node -v 版本
2.安装sass 命令:npm install -g sass 检查 sass -version 版本
2、sass命令自动编译css
1.scss文件自动生成.css 文件输出
根目录:sass --watch index.scss index.css
2.scss文件夹路径作为输入和输出(css的scss文件编译到stylecss文件夹)
根目录:sass --watch css:stylecss
3、简易工程目录(无框架)
4、sass使用
1.index.scss(文件主要记录了scss变量、嵌套、混合、继承)用法
@import 'base';//引入公共scss
// @use 'base';
@charset 'UTF-8';
$color:#ffffff;
$red:#f00;
// 变量
body{
width: 100%;
background-color: $color;
height: 100%;
margin: 0;
padding: 0;
// 嵌套 常用
.box{
font-size:px2rem(75px);
color:$red ;
padding-top: 150px;
padding-left: 100px;
}
}
// 混合minxi
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box{
@include transform(rotate(60deg));
}
//继承( 正常 错误 警告 )
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning{
@extend %message-shared;
border-color: yellow;
}
2.base.scss 公共样式 (含rem/vm)适配
@charset 'UTF-8';
$color:#ffffff;
@function px2rem($px){ //rem适配
@return $px / 75px*1rem;
// @return $px / 7.5px*1vw;
}
// @function vw($px) { vw适配
// @return ($px / 750) * 100vw;
// }
html{
width: 100%;
background-color: $color;
height: 100%;
}
编译后index.css 效果
html {
width: 100%;
background-color: #ffffff;
height: 100%;
}
body {
width: 100%;
background-color: #ffffff;
height: 100%;
margin: 0;
padding: 0;
}
body .box {
font-size: 1rem;
color: #f00;
padding-top: 150px;
padding-left: 100px;
}
.box {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.warning, .error, .success, .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
/*# sourceMappingURL=index.css.map */