scss或者sass的使用方法 css

项目构建的基本css --消除(html 默认样式在不同 浏览器的差异性) --抽取常用css 模块进行使用

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}
/*可选*/
html, body {
  width: 100%;
  height: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

scss 基本使用

1.vue 集成 scss

npm install css-loader style-loader --save-dev
npm install node-sass sass-loader --save-dev

vue 2.xx

//webpack.config.js-->moudle
   {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ["css-loader?minimize", "autoprefixer-loader", "sass-loader"],
          fallback: "style-loader",
        }),
      },

vue 3.xx

css: {
	modules: true,
	loaderOptions: {
		sass: {
			data: `@import "@/variables.scss";`
		},
		postcss: {
			plugins: [
                require('postcss-pxtorem')({
                    rootValue: 75,
                    propList: ['*', '!font-size'],
                }),
            ]
		}
	}
}

学习SCSS

1.变量声明
2. 变量引用;
3. 变量名用中划线还是下划线分隔;
4. 嵌套原则
5. 父选择器的标识符&;
6. 群组选择器的嵌套; p,h,div{}
7. 子组合选择器和同层组合选择器：>、+和~;
8. > 选择一个元素的直接子元素 +紧跟着的元素相邻的 ~除了自己以外 相邻的
9. 嵌套属性;
10.scss 导入@import “style/base”;
11.默认变量值; $highlight-color: #F90 !default; 修改 $highlight-color:#f00;

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
  p{
   color:'#f00'
   &:hover{
     background: $highlight-color
    }
  }
 // 嵌套属性
 nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  left:0px
  right:0px
  }
}
}

12嵌套导入;

// blue-theme.scss
aside {
  background: blue;
  color: white;
}

.blue-theme {@import "blue-theme"}

13.原生的CSS导入 —由于sass兼容原生的css，所以它也支持原生的CSS@import。
14.静默注释 //
15.混合器—利用混合器，可以很容易地在样式表的不同地方共享样式

@mixin center {
 display: flex;
  align-items: center;
  justify-content: center;
}

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include center;
}

16.混合器中的CSS规则
17.给混合器传参
18.默认参数值;

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
// 默认参数值;
@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

19.使用选择器继承来精简CSS

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

集成语法

mixin.scss

@charset "utf-8";
//rpx 换算
@function rpx($num){
  @return ($num /750) * 100vw;
}
$main-color: #F90;
$deputy-color:#F10;

<style scoped lang="scss"  >
// @mixin keyframes($name) {
//   @-webkit-keyframes #{$name} {
//     @content;
//   }
//   @-moz-keyframes #{$name} {
//     @content;
//   }
//   @-ms-keyframes #{$name} {
//     @content;
//   }
//   @keyframes #{$name} {
//     @content;
//   }
// }

// @mixin borderOpen($name, $x, $y, $time, $delay) {
//   animation: $name $time + s $delay + s forwards;
//   @keyframes #{$name} {
//     0% {
//       width: 0;
//       height: 0;
//     }
//     50% {
//       width: $x + px;
//       height: 0;
//     }
//     100% {
//       width: $x + px;
//       height: $y + px;
//     }
//   }
//   //   @include keyframes($name) {
//   //     0% {
//   //       width: 0;
//   //       height: 0;
//   //     }
//   //     50% {
//   //       width: $x + px;
//   //       height: 0;
//   //     }
//   //     100% {
//   //       width: $x + px;
//   //       height: $y + px;
//   //     }
//   //   }
// }

@mixin borderOpen($name, $x, $y, $time, $delay) {
  animation: $name $time + s $delay + s forwards;
  @keyframes #{$name} {
    0% {
      width: 0;
      height: 0;
    }
    50% {
      width: $x + px;
      height: 0;
    }
    100% {
      width: $x + px;
      height: $y + px;
    }
  }
}

.animation {
  background: #f00;
  @include borderOpen(animation1, 100, 100, 1, 1);
}

参考:https://code.z01.com/sass/docs.html