Some tips for writing SASS_html/css_WEB-ITnose

Better naming of variables

Variables are one of the simplest features in Sass, but they can sometimes be used inappropriately. Creating site-wide semantic variables is indispensable. If it is not named well, it will become difficult to understand and reuse.

Here are some tips on naming variables for reference:

Don’t be ambiguous when naming variables

Adhere to one naming convention (Modular, BEM, etc.)

Make sure the use of variables makes sense

Here’s a good example:

$orange: #ffa600; $grey: #f3f3f3; $blue: #82d2e5;$link-primary: $orange;$link-secondary: $blue;$link-tertiary: $grey;$radius-button: 5px;$radius-tab: 5px;

This is a bad example:

$link: #ffa600;$listStyle: none;$radius: 5px;

　

Reduce the use of Mixins

Mixins are a great way to implement code blocks that can be used in a site Used multiple times within. However, mixing mixins defined by @include is no different than copying and pasting in CSS code. It will make your CSS code generate a lot of duplicate code, making your files become more and more bloated.

So far, Mixins are only suitable for situations where you need to quickly create styles by passing parameters.

For example:

@mixin rounded-corner($arc) {    -moz-border-radius: $arc;    -webkit-border-radius: $arc;    border-radius: $arc;  }

The rounded-corner Mixins can be used in any situation, just by changing the value of its parameter $arc , you will get different codes:

.tab-button {     @include rounded-corner(5px); }.cta-button {     @include rounded-corner(8px); }

It is unwise to use mixins like this:

@mixin cta-button {    padding: 10px;    color: #fff;    background-color: red;    font-size: 14px;    width: 150px;    margin: 5px 0;    text-align: center;    display: block;}

This mixin is not passed For any parameters, it is more recommended to use %placeholder to create, which is also the next point.

Embrace Placeholder

Unlike Mixins, %placeholder can also be used multiple times without generating duplicate code. This makes the input CSS friendlier and cleaner.

%bg-image {    width: 100%;    background-position: center center;    background-size: cover;    background-repeat: no-repeat;}.image-one {    @extend %bg-image;    background-image:url(/img/image-one.jpg");}.image-two {    @extend %bg-image;    background-image:url(/img/image-two.jpg");}

Compiled CSS:

.image-one, .image-two {    width: 100%;    background-position: center center;    background-size: cover;    background-repeat: no-repeat;}.image-one {    background-image:url(/img/image-one.jpg") ;}.image-two {    background-image:url(/img/image-two.jpg") ;}

If multiple selectors use the same %placeholder, they will only be output once code. %placeholder without a reference will not output any CSS code.

Used together with previous Mixins, it can not only maintain the flexibility of Mixins, but also keep the code simple and clean.

/* PLACEHOLDER ============================================= */%btn {    padding: 10px;    color:#fff;    curser: pointer;    border: none;    shadow: none;    font-size: 14px;    width: 150px;    margin: 5px 0;    text-align: center;    display: block;}/* BUTTON MIXIN ============================================= */@mixin  btn-background($btn-background) {    @extend %btn;    background-color: $btn-background;    &:hover {        background-color: lighten($btn-background,10%);    }}/* BUTTONS============================================= */.cta-btn {    @include btn-background(green);}.main-btn {    @include btn-background(orange);}.info-btn {    @include btn-background(blue);}