less与scss的差异
这里只记录使用上的差异,如果less和scss都不会的需自己先去学习其中一种的使用方式
less | scss | |
---|---|---|
变量声明 | @,例如:@width: 10px | $, 例如: $width: 10px |
变量引明 | width: @width | width: $width |
混合申明 | 和写一般样式一样,例:.flex{ display: flex; } | 使用@mixin标识,例: @mixin flex{ display: flex;} |
混合引用 | .flex() | @include flex() |
嵌套 | {} | {} |
父选择器的标识符 | &, 例:&:before { width: 2px; } | &, 例:&:before { width: 2px; } |
运算 | +、-、*、/ | +、-、*、/、% |
嵌套 | .flex() | @include flex() |
嵌套 | .flex() | @include flex() |