Advanced CSS&Sass 02 - BEM, Basic Sass


BEM class naming system

Transform a normal CSS to BEM:

old:

image-20221126114539525

to

new:

Differnece between @include and @extend in sass:

write compile command for sas

you have to specify source file address and compiled file address

image-20221126133405251

watching mode

partial SCSS

the scss file with underscore is called partial scss, compiler would not compile these files

**shortcut import: **

Basic Responsive Design

Basic Elements

Fluid Layout: use max-width instead of width

Responsive Unit

Flexible Images

Media Queries

Basic Layouts

Useage of not() selector in CSS

Sass variables inside the calc() function should be included in #{}

clearfix mixin:

@mixin clearfix {
  &::after {
      content: "";
      display: table;
      clear: both;
  }
}

css Attribute Selector

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors


A u t h o r: Joe
P o l i c y: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source Joe !
Leave Your Comment Here
  TOC