Sass
sass-lang.com › documentation › variables
Sass: Variables
Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they’re one of the most useful tools Sass brings to the table.
W3Schools
w3schools.com › sass › sass_variables.asp
Sass Variables
Sass String Sass Numeric Sass List Sass Map Sass Selector Sass Introspection Sass Color ... Variables are a way to store information that you can re-use later.
Videos
05:57
Variables | Sass & Scss | Tutorial 6 - YouTube
08:01
SASS Tutorial (build your own CSS library) #3 - Variables - YouTube
01:36:47
CSS with SCSS - Learn SASS: Variables, Mixins, Imports, Functions ...
02:57
How Sass Variables Work - YouTube
06:28
SASS Tutorial #3 - SASS Variables - YouTube
CodiLime
codilime.com › blog › software development › frontend › css vs. scss variables — main differences and use cases
CSS vs. SCSS variables — main differences and use cases
August 13, 2023 - SCSS accepts any valid CSS syntax but with the added benefits of advanced features that makes writing CSS code easier and more efficient. SCSS variables are declared using the `$` symbol followed by a name and a value, like this:
Sass
sass-lang.com › guide
Sass: Sass Basics
You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable.
Sass
sass-lang.com › documentation › breaking-changes › css-vars
Sass: Breaking Change: CSS Variable Syntax
The CSS spec allows almost any string of characters to be used in a custom property declaration. Even though these values might not be meaningful for any CSS property, they could be accessed from JavaScript. When they were parsed as SassScript values, syntax that would have been valid plain ...
Tailwind CSS
tailwindcss.com › docs › theme
Theme variables - Core concepts - Tailwind CSS
Theme variables are special CSS variables defined using the @theme directive that influence which utility classes exist in your project.
Bootstrap
getbootstrap.com › docs › 5.3 › customize › sass
Sass · Bootstrap v5.3
Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making removing items from a map slightly more difficult. All variables in the $theme-colors map are defined as standalone variables.
Vuetify
vuetifyjs.com › en › features › sass-variables
SASS variables — Vuetify
Customize Vuetify's internal styles by modifying SASS variables.
Vanseo Design
vanseodesign.com › home › blog › css › how to use sass variables
How To Use Sass Variables - Vanseo Design
October 13, 2015 - Sass Variables are a way to store information that you want to reuse throughout your stylesheet. Variables are coming to CSS, but there’s not much support at the moment and it’s going to be awhile before you can use them.
Devhints
devhints.io › css › sass cheatsheet
Sass cheatsheet
Variables · mixins · darken() · adjust-color() · @for @each @while @if @else · $list: (a b c) · $map: (a: b, c: d) · One-page guide to Sass
Quasar Framework
quasar.dev › style › sass-scss-variables
Sass/SCSS Variables | Quasar Framework
How to use the Sass/SCSS variables defined by Quasar.
Kevin Powell
courses.kevinpowell.co › view › courses › sass-essentials › 50294-variables
Variables
Do you want to learn how to make some kick-ass websites? Between teaching in a physical classroom, my YouTube channel, and the premium courses available here, I teach people how to make the web, and how to make it look good while they are at it.
SitePoint
sitepoint.com › blog › gems › an introduction to sass in rails
An Introduction to Sass in Rails - May 2020 Edition
November 6, 2024 - If you’re like me, you like throwing around the same colors or gradients on the page with some slight variation. The hardest part is remembering them all, but SASS lets you store colors as variables. Wouldn’t it make more sense to use $androidgreen rather than #A4C639?
Portland Community College
pcc.edu › web-services › style-guide › basics › extras › variables
Sass variables | Web services at PCC
There are variables we use in our Sass stylesheets to make sure things like color and spacing are consistent throughout the stylesheet. Variables make it so you don’t have to repeat the same HEX or pixel value over and over, which cuts down on development time and leaves less room for human error.
Top answer 1 of 9
456
You can do it like this:
I have a folder named utilities and inside that I have a file named _variables.scss
in that file i declare variables like so:
$black: #000;
$white: #fff;
then I have the style.scss file in which i import all of my other scss files like this:
// Utilities
@import "utilities/variables";
// Base Rules
@import "base/normalize";
@import "base/global";
then, within any of the files I have imported, I should be able to access the variables I have declared.
Just make sure you import the variable file before any of the others you would like to use it in.
2 of 9
283
This question was asked a long time ago so I thought I'd post an updated answer.
You should now avoid using @import. Taken from the docs:
As of Dart Sass 1.80.0, the @import rule is deprecated and will be removed from the language in Dart Sass 3.0.0. Prefer the @use rule instead.
A full list of reasons can be found here
You should now use @use as shown below:
_variables.scss
$text-colour: #262626;
_otherFile.scss
@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension
body {
// namespace.$variable-name
// namespace is just the last component of its URL without a file extension
color: variables.$text-colour;
}
You can also create an alias for the namespace:
_otherFile.scss
@use 'variables' as v;
body {
// alias.$variable-name
color: v.$text-colour;
}
EDIT As pointed out by @und3rdg at the time of writing (November 2020) @use is currently only available for Dart Sass and not LibSass (now deprecated) or Ruby Sass. See https://sass-lang.com/documentation/at-rules/use for the latest compatibility
Start Bootstrap
startbootstrap.com › theme › sb-admin-2
SB Admin 2 - Free Bootstrap Admin Theme
A free Bootstrap admin theme, dashboard, or web application UI. All Start Bootstrap templates are free to download and open source.
Reddit
reddit.com › r/webdev › what is the purpose of sass variables when css already has a built-in way of keeping things dry with selectors?
r/webdev on Reddit: What is the purpose of SASS variables when CSS already has a built-in way of keeping things DRY with selectors?
September 10, 2015 -
It shouldn't be necessary to repeat a style throughout your stylesheet since you can do this:
.selector-1,
.selector-2 .selector-3,
.selector-4>.selector-5{color:#A48}So what is the reason for using variables in CSS? Is there another use-case for SASS variables that I am missing?
Is there a benefit in scattering your selectors throughout your sheet and using a variable rather than keeping everything in one place?
Top answer 1 of 5
7
Variables aren't about repeating entire blocks throughout, that's what mixins and or extend would do. Variables are used for things like global colors, and global fonts (basic examples) $mainColor: #f00; $secondaryColor: #222; $mainFont: Helvetica, sans-serif; a{ color: $mainColor; } div{ background: $mainColor; color: $secondaryColor; } http://sass-lang.com/guide That has some good basic examples :)
2 of 5
6
Maybe you can keep everything in once place on a small project, but when you have a lot of css, you most definitely do not want to keep everything in one file, and in that case you need variables which can be defined in one place, and reused throughout your files.
CSS-Tricks
css-tricks.com › introducing-sass-modules
Introducing Sass Modules | CSS-Tricks
October 14, 2019 - This is similar to the $with argument in load-css(). but rather than using variable-names as keys, we use the variable itself, starting with $. I love how explicit this makes configuration, but there’s one rule that has tripped me up several times: a module can only be configured once, the first time it is used. Import order has always been important for Sass, even with @import.
GitHub
github.com › sass › sass › issues › 3091
Convert Sass variables to CSS variables · Issue #3091 · sass/sass
It turns out that there is a possibility to have dynamic Sass variables. The implementation shouldn't be that hard. Just compile $primary to var(--primary) and CSS will do the work for us! Honestly, it seems that I wasn't the first to have this idea. Sass-to-css-variables have already implemented that; however, I'm not sure about this project as it has been updated 4 years ago.
Author ghost