前端- css预处理器

前端- css预处理器

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

To use a CSS preprocessor, you must install a CSS compiler on your web server; Or use the CSS preprocessor to compile on the development environment, and then upload compiled CSS file to the web server.

Sass

https://sass-lang.com/guide

Vairable

variables as a way to store information that you want to reuse throughout your stylesheet.

$font-stack:    Helvetica, sans-serif;
body {
  font: 100% $font-stack;
}

Nesting

nest your CSS selectors in a way that follows the same visual hierarchy of your HTML

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

partial

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files.

mixins

Lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

extends/inheritance

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message-shared;
  border-color: green;
}

operators

---

Sass compiler

Install

npm install -g sass

For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css.

Test

app.scss

$primary-color: rgb(241, 52, 52);

.MainContent {
    span {
        color: $primary-color
    }

}

sass app.scss app.css

app.css

.MainContent span {
  color: #f13434;
}

/*# sourceMappingURL=app.css.map */