SCSS and other preprocessors

I will highlight the things I like and find meaningful. However, if CSS were to add these to its specification, I’m certain I wouldn’t even look at SCSS anymore.

1. Nesting CSS with the necessary ampersand & variable
2. The fact that media queries can be written anywhere, even immediately alongside deeply nested CSS rule

Confusion regarding the removal of @import

I’ve tried various things, and it seems like they are trying to steer people away from CSS. Why am I convinced of this?

Tried, won’t work:

1. Deprecation Warning: As of Dart Sass 2.0.0, !global assignments won’t be able to declare new variables. Recommendation: add $html: null at the stylesheet root.

   @if not global-variable-exists('html') { $html: html !global; }

2. Error: This module and the new module both define a variable named “$html”

SCSS prešao sam na jebeni import

prevedi poruku na engleski

i ova nova:

I napokon moram da otvorim svoje pitanje pošto sam već više puta u nekoliko navrata pokušavao da rešim ovaj problem.

Kako se sa import prelazi na “@use i @forward”

I i dalje niko nije odgovorio na ono što je čovek pitao. Mislim meni je nestvarno da nekoliko sati pokušavam da nađem rešenje za jednu prostu stvar, a da ne koristim “@import”

Naime, problem je toliko jednostavan da je to strašno, a niko da napiše jednostavno:

1. Ne želim da menjam NIKAKO fajlove u poslednjem nivou foldera jer su to vrlo često samo obični CSS iz raznih biblioteka. Ne želim da ih pakujem unutar “@mixin” i da ih posle “@forward”-ujem i slično. Želim samo obične originalne fajlove.

2. U originalnom Nestvarno je koliko

I na kraju, sve ovo hoću da wrapujem jer imam problem sa scope?

CSS preprocessors

First notes from 2013-03-17, just as an interesting fact for me

SASS, LESS, Stylus

http://css-tricks.com/sass-vs-less/ :: SASS vs. LESS | CSS-Tricks http://designshack.net/articles/css/sass-vs-stylus-who-wins-the-minimal-syntax-battle/ :: Sass vs. Stylus: Who Wins the Minimal Syntax Battle? | Design Shack

http://compass-style.org/ :: Compass Home | Compass Documentation

http://learnboost.github.com/stylus/ :: Stylus https://github.com/visionmedia/nib#readme :: visionmedia/nib · GitHub

Arbitrary CSS preprocessing library for node.js https://github.com/visionmedia/rework#readme :: visionmedia/rework

SCSS

A Proof of Concept for Making Sass Faster | CSS-Tricks - CSS-Tricks tonyganch/gonzales-pe: CSS parser with support of preprocessors medialize/sass.js: Sass.js - API for emscripted libsass to run in the browser

Opet o SCSS: No seriously: Don’t use @extend

Razni alati:

css2sass | Convert CSS to SASS / SCSS code ništa nije zajebao, ali ne izvlači boje niti fontove. Ustvari, on je bolji, pošto lepo ukapira kada su stilovi isti pa ih grupiše pod zajednički selector. Dakle, bolji je on.

Repo je jpablobr/css2sass: Convert CSS Snippets to Syntactically Awesome StyleSheets code

Kada bi još imao “Use variables”.

• sortiranje propertia
• brisanje dupliranih

2. CSS to SCSS Converter - CSS Portal on jedinop što izvlači boje i fontove, ali nešto baš glupav za sve ostalo.

Najjednostavniji način da koristiš SCSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# install [sass/dart-sass](https://github.com/sass/dart-sass)
npm i sass -g

# you can see location also from list global packages
npm list -g
# a može i ovako ali je bolje ono gore
# npm config get prefix

# svejedno, ako nije u pathu možeš ga uvek pokrenuti direktno sa
npx run scss

# kreći

z _customize/assets/scss
runuser $(stat -c %U .) -s /bin/bash

# komande
sass --watch .:../css
# sass --watch sass:css
# sass source/index.scss css/index.css
# sass --watch style.scss style.css

# rename ne može jedan po jedan, pa sam svima ukinuo .min.css
sass --watch scss:css
# za production
sass --watch scss:css --style compressed --no-source-map