(syntax)scss
2022-09-01 00:00:00 #scss

scss

$变量

基础

  • 编译 单文件 scss input.scss output.scss 多文件scss input1.scss:output1.css input2.scss:output2.css 目录编译 scss 文件夹1:文件夹2 scss public/scss:app/css
  • 编译方式--watch --style [option ] --debug-info --sourcemap
    • sass –watch input.scss:output.css
    • expanded 默认 也就是常规的css排版
    • nested 层级排版 嵌套
    • compact 同一选择器压缩到一行 每条 CSS 规则只占一行
    • compressed 压缩到一行 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小
  • 变量
    • 默认变量 定义 $变量:值 !default; 使用 $变量
    • 全局变量 元素内部外或者mixin外部皆可理解为全局
    • 局部变量 元素内部定义的变量为局部变量
  • 数据结构

流程 @if @for

  • 条件 @if
  • 循环 @for
    • @for $i from <start> through <end> [start, end]
    • @for $i from <start> to <end> [start, end-1]
    • each 列表和map遍历 @each循环就是去遍历一个列表，然后从列表中取出对应的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
@for $i from 1 through 3{
	.item-#{$i} { width:2px * $i  }
}

@for $i from 1 to 5{
	.item-#{$i} { width:2px * $i  }
}

$num = 6

@while $num > 0{
  li#{num}{
		height:$num * 100px;
	}
	$num: $num - 1
}

@each $var in <list>

@each $user in mike cow reabbit{   .#{user}-ani{ }   }


$alt: alert, yellow, red;
$sub: submit, white, green;
$bck: back, blue, transparent;
@each $type, $txt, $back in $alt,$sub,$bck {
    .#{$type}-button {
        color: $txt;
        background-color: $back;
    }
}

$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );
@each $key, $usr in $ppl  {
    .#{$usr}-avatar {
        background-image: url('/img/#{$usr}.png');
    }
}

嵌套 {}

  • & 父类选择器
  • 元素嵌套 main>{ } main { ~header }
  • `属性嵌套 / 样式嵌套 将一个带连字符的属性分隔开
    • border-top
    • border{ left:1px solid red; top:100px solid black }
    • border:1px solid #000{ top:0px ; right:0px }
  • > 子代选择器 , 群组选择器 + 相邻兄弟选择器 ~ 通用兄弟选择器
  • background color !default 设置css默认值 默认值的权重是低于常规值的 无论默认值在什么位置

Mixin 混合器 @mixin @mixin和@extend 的区别就是 可以传递参数和不可以

  • 声明宏 @mixin 和 @include
    • @mixin 名（参数1，参数2）{ 属性：值}
    • @mixin li-style($width:5px,$display:block,$height:null) :值 默认参数
    • ... 数量可变的参数
  • 宏使用 @include
    • @include 名(参数1，参数2);
1
2
3
4
5
6
7
8
9
10
$shadow:0 0 3px rgba(#00)
@mixin sw($shadow..){   text-shadow:$shadow; }
@include sw($shadow)

@mixin B($selector) {
 #{$selector} {
  color: red;
 }
}
@include B('.header');

指令 @指令

  • @at-root 跳出根元素 @at-root 选择器{}
  • @debug @warn @error 调试 @debug:100em + 120em; 调试 警告信息和错误信息 相当于console.log()
  • @media 媒体查询
  • @content
  • @if @else 判断
    • 单条件 $height:if($condition,true,false) 测试条件，测试成功返回值，测试失败返回值
      • @if $weight == bold { }
    • 多条件 @if { }@else if { } @else{ }
  • @for @while @each
    • @for
    • @while
    • each 列表和map遍历
  • @function

继承 @extend 两种用 一种 占位 一种 扩展 避免使用@extend:

  • @extend 继承
  • 继承 占位符 复用css代码片段 占位符 复用css代码片段 % 占位符
    • 定义 %名{ }
    • 使用 选择器 { @extend %名; }
  • 继承另一个选择器的类样式 扩展选择器 添加css片段到当前选择器
    • 定义 .类名{}
    • 使用 .two { @extend .one{} } 当前选择器继承所有 指定类名的所有选择器和子选择器

函数 @函数()

  • 内置函数
    • 字符串函数 str-length($string) 长度 引号 unquote($string) quote($string) to-upper-case($string) 大写 to-lover-case($string) 小写 str-insert($string,$insert,$index) 插入字符串 str-index($string,$substring) 位置
    • 数组函数 length($list)长度 /join($list1,$list2) /nth($list,$n) 获取下标 /index($list,$value) 返回指定元素在数组中的位置 /set-nth($list,$n,$value) 替换指定下标的元素 /append($list1,$val,[$separator]) 从数组尾部添加元素 join($list1,$list2)拼接数组
    • 数字函数 percentage 转换成百分比 /round 四舍五入 /floor 向下 /ceil 向上 /max/min/random 随机
    • map函数
      • $map:(key:value,key2,value2)
      • map-get($map,$key）/map-merge 两个map值合并成一个新的map /map-remove/map-has-key/
      • map-keys/map-values/keywords($args)
    • 列表函数length($list) join($list1, $list2, [$separator]) append($list1, $val, [$separator]) zip($lists…) index($list, $value) nth($list,$i)
  • 自定义函数
    • 定义 @function 函数名(){方法体 @return}
      • @function 函数名字(参数1，参数2，..){
        @return $参数1 + 100px
        }
    • 使用函数名（参数） 使用
      • width:函数名字(参数1)
1
2
3
4
@function 函数名字(参数1，参数2，..){
  @return $参数1 + 100px
}
width:函数名字(参数1)

插值 #{}

  • $height-box = 1000px
  • 选择器名:{ 键:值 }
    • 值名：height:#{height-box}
    • 选择器名：#{$height-box}{ }
    • 不能用于属性名

web api

math

  • <math></math>

canvas js绘图 canvas 的绘制代码可以在 <script>、js文件

  • canvas id="myCanvas"
  • ctx = document.getElementById('myCanvas').getContext('2d')
  • ctx.fillStyle = 填充颜色
  • ctx.stroke();
  • 线ctx.strokefill = ‘red’; // 边框的颜色
  • 常见图形

    • 路径画线

      • lineTo(x,y) moveTo(x,y)
        • moveTo(x,y) 定义线条开始坐标
        • lineTo(x,y) 定义线条结束坐标

    • 正方形 fillRect(x,y,x,y)

    • 圆形 ctx.arc(x,y,r,start,stop)

    • 文字 ctx.font=”30px Arial”; // 设置字体大小ctx.strokeText(“Hello World”,10,50); // fillText(text,x,y); 设置字体

      • font - 定义字体
      • fillText(text,x,y) - 在 canvas 上绘制实心的文本
      • strokeText(text,x,y) - 在 canvas 上绘制空心的文本（x,y）位置

    • 渐变

      • createLinearGradient(x,y,x1,y1) - 创建线条渐变 // 创建渐变var grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// 填充渐变ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
      • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 // 创建渐变var grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// 填充渐变ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
      • addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1. 使用渐变，
      • 设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线

    • 图像 drawImage(image,x,y)

svg xml绘图 svg 的绘制代码可以在<style>、svg文件

上一页
2022-09-01 00:00:00 #scss
下一页