hxx/devStandard

Fork 0

jqtmviyu 7b202bc051 upload for gitea

2025-03-29 14:35:49 +08:00

5.9 KiB

Raw Permalink Blame History

less sass

==scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是@变量名, 而scss采用的$变量名==

less

css 预处理器, 有嵌套, 变量, 混入, 运算, 函数等功能

http://lesscss.cn/

vscode 插件

easy less

变量

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

/* 定义变量 */
@color: pink;
@font14: 14px;
/*变量的使用*/
body {
  background-color: @color;
}


// 不会编译注释
/** 会保留注释 */ 

// 不想编译某些子段, ~'' 包裹住
height: ~'calc(300px - 30px)';
// 让浏览器计算，不是让less计算

嵌套

// 将css改为less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}

& 连接符号

如果遇见（交集|伪类|伪元素选择器），利用&进行连接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  } 
}

运算

+ - * /, 左右两边要有空格
数字, 颜色, 变量
两个不同单位的值运算, 结果取第一个值的单位; 一个单位, 则用它

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

导入 @import

//在index.less中导入common.less文件
@import "common";

unit

重置单位

@num: 10px;

div {
  height: unit(@num, rem);
}

/** height用了unit，把设置好的变量@num的10px，变成10rem */

循环

https://zhuanlan.zhihu.com/p/192364861

例如循环输出四个 padding 属性：

.loop(@i) when (@i > 0) {
   .loop((@i - 1));    // 递归调用自身
   padding: (10px + 5 * @i); 
 }
 
.call{
   .loop(4); // 调用循环
}
编译成 CSS 代码：

.call {
  padding: 15px;
  padding: 20px;
  padding: 25px;
  padding: 30px;
}

.generate-space(32);
.generate-space(@n, @i: 4) when(@i =< @n) {
  .generate-space(@n, @i + 4);
  .f-@{i} {
    font-size: unit(@i,px);
  }
  .m-@{i} {
    margin: unit(@i,px);
  }
  .m-h-@{i} {
    margin-left: unit(@i,px);
    margin-right: unit(@i,px);
  }
  .m-v-@{i} {
    margin-top: unit(@i,px);
    margin-bottom: unit(@i,px);
  }
  .m-t-@{i} {
    margin-top: unit(@i,px);
  }
  .m-b-@{i} {
    margin-bottom: unit(@i,px);
  }
  .m-r-@{i} {
    margin-right: unit(@i,px);
  }
  .m-l-@{i} {
    margin-left: unit(@i,px);
  }
  .p-@{i} {
    padding: unit(@i,px);
  }
  .p-h-@{i} {
    padding-left: unit(@i,px);
    padding-right: unit(@i,px);
  }
  .p-v-@{i} {
    padding-top: unit(@i,px);
    padding-bottom: unit(@i,px);
  }
  .p-r-@{i} {
    padding-right: unit(@i,px);
  }
  .p-l-@{i} {
    padding-left: unit(@i,px);
  }
  .p-t-@{i} {
    padding-top: unit(@i,px);
  }
  .p-b-@{i} {
    padding-bottom: unit(@i,px);
  }
  .f-s-@{i} {
    font-size:  @i*1px;
  }
}

递归

生成原子样式

generate-space(32); //调用函数
// 变量说明 @n：循环次数、@i：Class名称后缀&开始数字
.generate-space(@n, @i: 4) when(@i =< @n) {
  .generate-space(@n, @i + 4);
  .f-@{i} {
    font-size: unit(@i,px);
  }
  .m-@{i} {
    margin: unit(@i,px);
  }
  .m-h-@{i} {
    margin-left: unit(@i,px);
    margin-right: unit(@i,px);
  }
  .m-v-@{i} {
    margin-top: unit(@i,px);
    margin-bottom: unit(@i,px);
  }
  .m-t-@{i} {
    margin-top: unit(@i,px);
  }
  .m-b-@{i} {
    margin-bottom: unit(@i,px);
  }
  .m-r-@{i} {
    margin-right: unit(@i,px);
  }
  .m-l-@{i} {
    margin-left: unit(@i,px);
  }
  .p-@{i} {
    padding: unit(@i,px);
  }
  .p-h-@{i} {
    padding-left: unit(@i,px);
    padding-right: unit(@i,px);
  }
  .p-v-@{i} {
    padding-top: unit(@i,px);
    padding-bottom: unit(@i,px);
  }
  .p-r-@{i} {
    padding-right: unit(@i,px);
  }
  .p-l-@{i} {
    padding-left: unit(@i,px);
  }
  .p-t-@{i} {
    padding-top: unit(@i,px);
  }
  .p-b-@{i} {
    padding-bottom: unit(@i,px);
  }
  .f-s-@{i} {
    font-size:  @i*1px;
  }
}

scss

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集.

Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似

变量

sass使用$符号来标识变量

$highlight-color: #f90

上面我们声明了一个名为$highlight-color的变量, 我们可以把该变量用在任何位置

#app {尊敬
    background-color:  $highlight-color;
}

变量范围

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}

# 编译后 

nav {
  width: 100px;
  color: #F90;
  background-color: black;
}

在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

嵌套语法

和less一样,scss同样支持**嵌套型**的语法

#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
    }
    aside { background-color: #f90 }
  }

&父选择器

假如你想针对某个特定子元素进行设置

比如

  #content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        &:hover { color: red }
      }
    }
    aside { background-color: #f90 }
  }

导入

@import './variables.scss';

5.9 KiB Raw Permalink Blame History Unescape Escape