scss Scss配置组件

Posted 2021-05-17

@charset "UTF-8";
/*
- Conventions :
  - BEM
    .block
    .block__element
    .block__element--modifier
  - OOCSS
  - SMACSS
  - RSCSS
    .block > .element.modifier
- Namespacing :
  - OOCSS base donc potentiellement cumulable avec un autre methodologie ?
    ex .t-theme .img.4-3



*/
/* Exceptions

Gérer les exceptions :  comme dans les autres langages on peut imaginer un couple try/thrown
afin de gérer les erreurs, debugs, infos...
ne pas bloquer la compilation suivant un contexte de développement

Utiliser une fonction thrown peut permettre de changer de comportement suivant l'environnement
par exemple retourner une @error ou @warn suivant le cas prod ou dev.

- gérer des reporting du déroulement de la compilation
- gérer le debug de maps ou d'environement suivant le contexte de compilations

Notes:
- en scss on ne peut pas renvoyer d'info sur la ligne conçernée lors de l'utilisation de la fonction

*/
/*
@function is-namespace()
@param $namespace {string} - 
@return {bool} - true
@thrown - error
*/
/* set-context */
/*

@mixin is-extender() -  
*/
.test {
  __NAME: content;
  __NAMESPACE: components;
  __TEST: true;
  __SHORTCUT: "c-";
}

@debug-map {
  __toString__: (content: (type: components, elements: (), modifiers: ()));
  __length__: 1;
  __keys__: content;
  __properties__ {
    content: (type: components, elements: (), modifiers: ());
  }
}

.c-content {
  color: white;
  background-color: black;
}

.test {
  __NAME: "footer";
  __NAMESPACE: "components";
  __TEST: true;
  __SHORTCUT: "c-";
}

@debug-map {
  __toString__: (content: (type: components, elements: (), modifiers: ()), "footer": (type: "components", elements: (), modifiers: ()));
  __length__: 2;
  __keys__: content, "footer";
  __properties__ {
    content: (type: components, elements: (), modifiers: ());
    footer: (type: "components", elements: (), modifiers: ());
  }
}

.c-footer {
  color: blue;
  font-size: 2rem;
}

.config {
  _VERSION: "v1.0.0";
  _NAMESPACING: true;
}

.debug {
  _config: true;
}

.page__btn, .page__alert {
  color: blue;
}

.test {
  __NAME: "header";
  __NAMESPACE: "objects";
  __TEST: true;
  __SHORTCUT: "o-";
}

@debug-map {
  __toString__: (content: (type: components, elements: (), modifiers: ()), "footer": (type: "components", elements: (), modifiers: ()), "header": (type: "objects", elements: (), modifiers: ()));
  __length__: 3;
  __keys__: content, "footer", "header";
  __properties__ {
    content: (type: components, elements: (), modifiers: ());
    footer: (type: "components", elements: (), modifiers: ());
    header: (type: "objects", elements: (), modifiers: ());
  }
}

.o-header {
  color: blue;
}

.o-header__title, .o-header__sub-title {
  font-size: 2em;
}

.o-header--sticky {
  color: blue;
}

.tbn, .o-header__logo {
  color: pink;
}

.o-header__logo {
  float: right;
}

.t-dark .o-header__logo {
  color: white;
}

.o-header__logo--hudge {
  font-size: 2rem;
}

.o-header__logo.is-alert {
  color: red;
}

.t-light .o-header {
  background-color: white;
}

.t-light .o-header .logo {
  font-size: 2em;
}

.t-dark .o-header {
  background-color: black;
}

> 1%
last 2 versions

// ----
// libsass (v3.5.0.beta.2)
// ----

//------------------------------------------
//@import "susy";
//@import "include-media";
//------------------------------------------
@mixin debug-map($map) {
    @at-root {
        @debug-map {
            __toString__: inspect($map);
            __length__: length($map);
            __keys__: map-keys($map);
            __properties__ {
                @each $key, $value in $map {
                    #{$key}: inspect($value);
                }
            }
        }
    }
}
//------------------------------------------
// GLOBALS
//------------------------------------------
$_colors:(
  primary: '' ,
  secondary:'',
  tertiary: '',
  action: '',
  success: '',
  warning: '',
  danger: '',
  info: ''
) !default;

$_namespaces:(
  objects: 'o',
  components: 'c',
  themes: 't',
  utilities: 'u'
) !default;

$_conventions:(
  'object-prefix': '-',
  'element-prefix': '__',
  'modifier-prefix': '--',
  'state-prefix': 'is-',
  namespacing: true,
  namespaces: $_namespaces
) !default;

// _config
@if not global-variable-exists(_config) {
  $_config: (
      version: 'v1.0.0',
      colors: $_colors,
      conventions: $_conventions
  ) !global;
}

//------------------------------------------
// Normaliser la création de composants css
// Block|module|component|utilitie parent : le selecteur de plus haut niveau
/*
- Conventions :
  - BEM
    .block
    .block__element
    .block__element--modifier
  - OOCSS
  - SMACSS
  - RSCSS
    .block > .element.modifier
- Namespacing :
  - OOCSS base donc potentiellement cumulable avec un autre methodologie ?
    ex .t-theme .img.4-3



*/
/* Exceptions

Gérer les exceptions :  comme dans les autres langages on peut imaginer un couple try/thrown
afin de gérer les erreurs, debugs, infos...
ne pas bloquer la compilation suivant un contexte de développement

Utiliser une fonction thrown peut permettre de changer de comportement suivant l'environnement
par exemple retourner une @error ou @warn suivant le cas prod ou dev.

- gérer des reporting du déroulement de la compilation
- gérer le debug de maps ou d'environement suivant le contexte de compilations

Notes:
- en scss on ne peut pas renvoyer d'info sur la ligne conçernée lors de l'utilisation de la fonction

*/

@function _thrown($e){
  
  @warn $e;
  @return false;
}
/*
@function is-namespace()
@param $namespace {string} - 
@return {bool} - true
@thrown - error
*/
@function is-namespace($namespace){
    @if(map-has-key($_namespaces, $namespace)){
      @return true;
   }
   @else {
     @return _thrown($namespace + " n'éxiste pas");
   }
}

  // get a shortcut from a list or map
  // Unused
  @function get-shortcut(){
    
  }
  
$_components:() !global;
@function add-component($name, $type){
    @if(map-has-key($_components,$name)){
      @error '`#{$name}` existe déjà dans les composants #{$_components}';
      @return false;
    }
    $new_block: (
      $name: (
        type: $type,
        elements:(),
        modifiers:()
      ) 
    );
    $_components: map-merge($_components,$new_block) !global;
    @return true;
}

@function update-component(){}


@mixin module($name, $namespace: 'objects',$params...){
    $shortcut: '';

    @if(is-namespace($namespace) and map-get($_conventions,namespacing) == true){
        $shortcut: map-get($_namespaces,$namespace) + map-get($_conventions,'object-prefix');
    }
    
    $component: add-component($name, $namespace);
    
    .test {
      __NAME: $name;
      __NAMESPACE: $namespace;
      __TEST: is-namespace($namespace);
      __SHORTCUT: $shortcut ;
    }
    @include debug-map($_components);
    .#{$shortcut}#{$name}{
      @content;
    }
}

@mixin element($elements...){
  //$_selector:();
  $element_prefix: map_get($_conventions,'element-prefix');
  $block: &;
  $e: null;
  @each $selector in $elements{
    $e: append($e,$block+$element_prefix+$selector,'comma');
  }

  @at-root #{$e}{
    @content;
  }
}


// Modifier
$modifier-prefix: map-get($_conventions,'modifier-prefix');
@mixin modifier($modifier){
    &#{$modifier-prefix}#{$modifier}{
         @content;
    }
}

// State
$state-prefix: map-get($_conventions,state-prefix);
@mixin state($state){
  //value: map-get($convention,state-prefix);
  &.#{$state-prefix}#{$state}{
    @content;
  }
}

// Theme
// attendu : body|html.theme .element
@mixin theme($theme){
  $selector: () ;
  $namespace: 't-';
  @each $sel in & {
      $t: selector-nest('.#{$namespace}#{$theme}',#{$sel});
      $selector: append($selector, $t, 'comma');
  }
  
  @at-root #{$selector}{
      @content;
  }
}  


/* set-context */
$_context: ()!global;
@function set-current-context($obj, $name, $selector) {
    $new-current: (#{$obj}: (name: $name, selector: $selector));
    $_context: map-merge($_context, $new-current) !global;

    @return $selector;
}

@function unset-current-context($obj) {
    $new-current: (#{$obj}: null);
    $_context: map-merge($_context, $new-current) !global;

    @return null;
}


/*

@mixin is-extender() -  
*/
@mixin is-extender($selector){
  @content;
}


//------------------------------------------
// Autre type d'organisation
//------------------------------------------

@mixin new($object_name,$type,$params){
  // Instancie un nouvel objet (composant)
  // ajouter le composant a un tableau de composant stocké en globale
  // en vérifiant qu'il n'est pas déjà présent pour éviter de produire plusieurs fois les css
  // $obect-name : nom unique
  // $type : component,utilitaire,objet n'a de sens que si on utilise la méthodologie OOCSS
  // Charge sa configuration par défaut et met a jour si des params utilisateur son passés
  // lors de l'appel de la mixin
  
}
@mixin object-layout($params...){}
@mixin object-theme($params...){}

@mixin object(){
  @include object-layout(){};
  @include object-theme(){};
}


//------------------------------------------
// OUTPUT
//------------------------------------------
@function config($default_settings,$user_settings){
  $env: map-merge($default_settings,$user_settings);
  $config: $env !global;
  @return $env ;
}
@function this($setting){
  @return map-get($config,$setting)
}

// footer example module
@mixin footer($params:()){
  $footer: config((
    'color': blue,
    'font-size': 2rem
  ), $params);
  
  @include module('footer', 'components'){
    color: this('color');
    font-size: this('font-size');
  }
}

// Content example module
@mixin content($params:()){
  $content: config((
    'color': white,
    'background-color': black
  ),$params) ;
  
  @include module(content, components){
    color: this('color');
    background-color: this('background-color');
  }
}

@include content();

@include footer();





$map: ('test':  map-get($_config,'version'));


.config {
  _VERSION: map-get($_config, 'version');
  $conventions:map-get($_config, 'conventions');
  _NAMESPACING: map-get($conventions, 'namespacing');
  $contexte: set-current-context('theme','dark','logo');
  //_CONTEXTE: $_context;
}

.debug{
  _config: global-variable-exists(_config) ;
}


.page {
  @include element(btn,alert){
    color:blue;
  }
}


@include module('header'){

  color: blue;
  
  @include element(title,sub-title){
    font-size: 2em;
  }
  
  
  // modifier : class qui étend le parent/block
  @include modifier('sticky'){
      color:blue;
  }
    
  @at-root{ // ici @
      .tbn {
        color: pink;
      }
  }

  @include element('logo'){
    @extend .tbn; // [namespace]-[object|components|block]__[element|sub]
    float:right;
    
    @include theme('dark'){
      color: white;
    }
    
    @include modifier('hudge'){
      font-size: 2rem;
    }
    
    @include state('alert'){
        color: red;
    }
  }
  @include theme('light'){
    background-color: white;
    & .logo {
      font-size:2em;
    }
  }
  @include theme('dark'){
    background-color: black;
  }
  
}