почему _partial в sass включен - PullRequest
Новая
       14

почему _partial в sass включен

0 голосов
/ 28 июня 2018

У меня есть частичный sass под названием "_color.scss", где он имеет этот код из materializecss. 

$materialize-red: (
 "base":       #e51c23,
  "lighten-5":  #fdeaeb,
  "lighten-4":  #f8c1c3,
  "lighten-3":  #f3989b,
  "lighten-2":  #ee6e73,
  "lighten-1":  #ea454b,
  "darken-1":   #d0181e,
  "darken-2":   #b9151b,
  "darken-3":   #a21318,
  "darken-4":   #8b1014,
);
...

@each $color_name, $color in $colors {
  @each $color_type, $color_value in $color {
    @if $color_type == "base" {
      .#{$color_name} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text {
        color: $color_value !important;
      }
    }
    @else if $color_name != "shades" {
      .#{$color_name}.#{$color_type} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text.text-#{$color_type} {
        color: $color_value !important;
      }
    }
  }
}

// Shade classes
@each $color, $color_value in $shades {
  .#{$color} {
    background-color: $color_value !important;
  }
  .#{$color}-text {
    color: $color_value !important;
  }
}


// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)

@function color($color, $type) {
  @if map-has-key($colors, $color) {
    $curr_color: map-get($colors, $color);
    @if map-has-key($curr_color, $type) {
      @return map-get($curr_color, $type);
    }
  }
  @warn "Unknown `#{name}` in $colors.";
  @return null;
}

Затем во всех моих других файлах .scss я импортирую их в. 

@import "../../bower_components/materialize/sass/components/color";

Учитывая это утверждение их сайта: «Подчеркивание позволяет Sass знать, что файл является только частичным файлом и что его не следует создавать в файле CSS.», Следует ли это исключить из фактического css? Но мое текущее окружение включает частичное в мою css

это было как-то связано с моим ворчанием?

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Без подчеркивания есть вероятность, что ваш инструмент сборки (grunt) выведет файл CSS для каждого файла SCSS в ваших папках. Например, с этой структурой папок (без подчеркивания): 

my_project
    scss
        main.scss
        colors.scss
        mixins.scss
        component1.scss
        component2.scss

grunt может выводить файл CSS для каждого частичного: 

my_project
    css
        main.css
        colors.css
        mixins.css
        component1.css
        component2.css

Большинство людей не хотят этого, поэтому мы используем подчеркивание, чтобы grunt не компилировал каждый файл, например: 

my_project
    scss
        main.scss
        _colors.scss
        _mixins.scss
        _component1.scss
        _component2.scss

Это будет выводить как: 

my_project
    css
        main.css
0 голосов
/ 28 июня 2018

Вам не нужно включать частичный файл в каждый файл over sass, это противоречит цели. Как выглядит ваша файловая структура? Например, моя файловая структура будет выглядеть примерно так: 

main.scss
_variables.scss
_mixins.scss
_grid.scss
_whatever.scss

и затем в main.scss 

@import 'variables'
@import 'mixins'
@import 'grid'
@import 'whatever'

С помощью grunt или sass вы затем компилируете main.scss или используете sass: 

sass --watch main.scss:style.css
...