Читаем Sass Best Practices: Tips And Tools For Developers

И находим ссылки на 10-ток статей, по темам: Aesthetic Sass, 11 Mixin Libraries For Sass Designers, HOW I STRUCTURE MY SASS PROJECTS, Understanding CSS Writing Methodologies, For, while, and each loops in Sass, Единицы измерения: "px", "em", "rem"

Sass Best Practices: Tips And Tools For Developers
Sass Guidelines
What Are Some "Best Practices" For Using Sass Or Writing Sass Code? ...our folder structure tends to be something like: globals, components, pages... We also have some sass in external libraries which can be imported in main.sass.
HOW I STRUCTURE MY SASS PROJECTS OUR FRONT-END DEVELOPMENT PRACTICES
Aesthetic Sass 1: Architecture and Style Organization
Learning Sass with CodePen
Aesthetic Sass 2: Colors and Palettes
Aesthetic Sass 3: Typography and Vertical Rhythm
Sass: Directory Structures That Help You Maintain Your Code
11 Mixin Libraries For Sass Designers Should GetMore Posts on Sass: Getting Started With Sass Digging Into Sass How To Compile Sass With Sublime Text Using Bootstrap 3 With Sass How To Build An Online VCard With Sass & Compass CSS Preprocessors Compared: Sass Vs. LESS Syntactically Awesome Stylesheets: Using Compass In Sass How To Convert CSS To Sass & SCSS
Understanding CSS Writing Methodologies OOCSS (Object Oriented CSS) BEM (Block, Element, Modifier) ACSS (Atomic CSS) SMACSS (Scalable and Modular Architecture for CSS)
Skimming this SitePoint guide you’ll find three golden rules for nesting: Never go more than 3 levels deep. Ensure the CSS output is clean and reusable. Use nesting when it makes sense, not as a default option.
For, while, and each loops in Sass
reddit.com Sass
A standard module definition for Sass Sass Way However a Sass Way article suggests writing all selectors as mixins and only calling them as needed

Единицы измерения: "px", "em", "rem" и другие

Let’s walk through this suggested organization style to examine the purpose of each folder¶

/globals – contains Sass files that get applied site-wide like typography, colors, and grids

/components – contains Sass files with component styles like buttons, tables, or input fields

/sections – contains Sass files dedicated to specific pages or areas on a page (might work better combined into the /components/ folder)

/utils – contains third-party utilities like Normalize that can be updated dynamically with tools like Bower.

main.scss – the primary Sass file in the root folder that imports all others.

A non-trivial, well-structured component will include most of the following component-specific parts¶

Variables – for relating component-specific values to others and preventing magic numbers

Mixins – for dynamically generating variations of the component (not necessary if few variations exist)

Structure – the CSS component layout/structure, excluding any non-layout rules, such as color

Relationships – any component-specific CSS with regard to relationships (via combinators) with other components

Themes – thematic CSS for non-layout component styling, such as background, colors, shadows, etc.

Exported Selectors – the manifested CSS classes/selectors, if they are to be expose

Посты чуть ниже также могут вас заинтересовать