Giter Site home page Giter Site logo

therte2nten / sassify-v8 Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 1.17 MB

πŸ“¦ Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ Π½Π°Π±ΠΎΡ€ миксинов ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π½Π° языкС CSS-прСпроцСссора @sass

Home Page: https://www.npmjs.com/package/@therteenten/sassify

License: MIT License

SCSS 100.00%
sass sassify scss npm-package

sassify-v8's Issues

ΠœΠΈΠΊΡΠΈΠ½Ρ‹ Spacers (Π°Π½Π°Π»ΠΎΠ³ ΠΈΠ· Bootstrap)

ΠœΠΈΠΊΡΠΈΠ½Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ CSS-классы Ρ‚ΠΈΠΏΠ° p-4, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚ padding: 4px. Π’Π°ΠΊΠΈΠ΅ utility-классы ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ стилСй ΠΈ вёрсткС.

@use 'node_modules/@therteenten/sassify' as sassify with (
  $dvalues--spacers-class-name__padding: 'p',
  $dvalues--spacers-use-em: true
);

/// @param {string} $type - Ρ‚ΠΈΠΏ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ (padding, margin)
/// @param {number} $max-value - максимальноС количСство ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π°Ρ€Π½Ρ‹Ρ… классов (`px-12`, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ `$max-value == 12`)
@include sassify.create-spacers($type, $max-value);

Strict Mode

Π˜Ρ‚Π°ΠΊ! НСобходимо Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ «ТСсткий» Ρ€Π΅ΠΆΠΈΠΌ Π²Ρ‹Π²ΠΎΠ΄Π° ошибок.

Настройка Strict Mode являСтся лишь Sass-ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ с Π±ΡƒΠ»Π΅Π²Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.

@use "./node_modules/therteenten/sassify" as sassify with (
  $strict-mode: true
);

Π§Ρ‚ΠΎ мСняСт Strict Mode?

ΠŸΡ€ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌ Тёстком Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π²Ρ‹Π²ΠΎΠ΄Π° ошибок сборки Sass компилятор ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‰Π°Π΅Ρ‚ сборку ΠΏΡ€ΠΈ появлСнии ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ошибки, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΠΎΡ‚Π»Π°Π²Π»ΠΈΠ²Π°ΡŽ Π² ΠΊΠΎΠ΄Π΅.

НапримСр, Ссли Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π±Ρ‹Π» ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ Π½Π΅Π²Π΅Ρ€Π½Ρ‹ΠΉ Ρ‚ΠΈΠΏ Π΄Π°Π½Π½Ρ‹Ρ… (List вмСсто Map). Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² использования Strict Mode Π² качСствС Π·Π°Ρ‰ΠΈΡ‚Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΎΡ‚ выстрСла сСбС Π² Π½ΠΎΠ³Ρƒ ΠΌΠ½ΠΎΠ³ΠΎ.

ΠŸΡ€ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π²Ρ‹Π²ΠΎΠ΄Π° ошибок сборки Sass компилятор Π½Π΅ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‰Π°Π΅Ρ‚ сборку, Π½ΠΎ ΠΎΠ½Π° ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ½Ρ‹Ρ… участков. Π›ΠΎΠ³ΠΈ ΠΎΠ± ΠΎΡˆΠΈΠ±ΠΊΠ°Ρ… соотвСтствСнно выводятся Π² консоль Ρ‡Π΅Ρ€Π΅Π· Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρƒ @debug.

Π‘Π΅Ρ‚ΠΊΠ° ΠΈΠ· Bootstrap 4.x

Π’.ΠΊ. сСйчас сСтка ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΠ· Π²Π΅Ρ‚ΠΊΠΈ Bootstrap 3, Π° это Π½Ρƒ ΠΎΡ‡Π΅Π½ΡŒ старая вСрсия, Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€Π° вСрсии сСтки.

НапримСр:

// grid.scss
@use 'node_modules/@therteenten/sassify' as sassify;

@include sassify.grid-init(v4);

// ΠΈΠ»ΠΈ
@include sassify.grid-init-v4();

Или

@use 'node_modules/@therteenten/sassify' as sassify with (
  $setting--grid-version: 4
);

@include sassify.grid-init();

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ нСпонятно ΠΊΠΎΠΌΡƒ ΠΈ Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Π° сСтка ΠΈΠ· Bootstrap 3. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Π΅Π΅ Π²Ρ‹ΠΏΠΈΠ»ΡŽ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ сСток ΠΈΠ· Π½ΠΎΠ²Ρ‹Ρ… Π²Π΅Ρ‚ΠΎΠΊ Bootstrap 4 ΠΈ 5, Π°, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈ 6.

Ѐункция для получСния Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈΠ· Common

Π’ ΠΏΠ°ΠΏΠΊΠ΅ ./common/colors/ Π΅ΡΡ‚ΡŒ большоС количСство ΠΊΠ°Ρ€Ρ‚ (Map) Ρ†Π²Π΅Ρ‚ΠΎΠ² (Apple, Microsoft Windows, Material Design Colors), Π½ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ строчку ΠΊΠΎΠ΄Π°. НапримСр:

@use 'node_modules/@therteenten/sassify' as sassify with (
  // настройки Sassify
);

// ...

.text-error {
  color: sassify.map-deep-get(sassify.$color--md-red, 400);
  // ...
}

Блишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ, написав Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ сами Π±ΡƒΠ΄ΡƒΡ‚ Π±Ρ€Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°. НапримСр:

// ΠΈΠΌΠΏΠΎΡ€Ρ‚ Sassify ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Ρƒ, Π½ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ 

.text-error {
  color: sassify.color-md(red, 400);
  // ΠΈΠ»ΠΈ
  color: sassify.color-apple(ios-dark, red);
}

По ΠΌΠ½Π΅ выглядит опрятнСС ΠΈ достаточно понятнСС. А Ссли Sassify ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ глобально (Ρ‚.Π΅. Π±Π΅Π· пространства ΠΈΠΌΡ‘Π½) Ρ‡Π΅Ρ€Π΅Π· *, Ρ‚ΠΎ Π΅Ρ‰Ρ‘ ΠΏΡ€ΠΎΡ‰Π΅:

.text-error {

  color: color-md(red, 400);
  
  // ΠΈΠ»ΠΈ
  color: color-apple(macos, red);
  
  // Π½Ρƒ ΠΈ Ρ„ΠΎΠ½ окрасим Ρ€Π°Π΄ΠΈ интСрСса 
  background-color: color-md(grey, 50);
  
}

Π”ΡƒΠΌΠ°ΡŽ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ прям ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ. Надо Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ это Π² грядущСм ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Sassify.

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° `null` Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π½Π°Π΄ΠΎ

Π§Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚, Ссли Π² миксин prefixer Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ $prefixes ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ null? НуТно ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ это ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ сообщСниС-ΠΎΡˆΠΈΠ±ΠΊΡƒ ΠΎ нСподходящСм ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π΅.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.