Well.. Im a little familiar with LESS and when im trying to move up to SASS.
In less i create some framework this way:
.w(#x){width:#x;}
.h(#x){height:#x;}
.f(#x,#y){font:#x '#y'}
i save it framework.less and #import it on my main.less
I just searched but i didnt found how to do it in SASS.. Just read the docs in the official site but no success.
Can anybody explain me or send me a tutorial link? All the links i found on google was a little hard to understand even to make SASS work.
LESS' docs are very simple to understand but SASS is too complicated..
Those are called mixins. You would write them like so:
#mixin w($x){width:$x;}
#mixin h($x){height:$x;}
#mixin f($x,$y){font:$x $y}
Mixin invocation looks like this:
.foo {
#include f(1.5em, sans-serif);
}
However, your f mixin has redundant arguments:
#mixin f($x){font:$x}
.foo {
#include f(1.5em sans-serif);
}
Related
I'm kind of new to SCSS and I wanted to ask if there is a more efficient way to include mixins into my partials without having to reference it every time. For example, at the top of every partial where I use the mixin for media queries this is what I have:
#use '../abstracts/mixins' as *;
.wrapper {
margin-inline: auto;
padding-inline: 1.5rem;
#include breakpoint(medium) {
max-width: 80rem;
}
}
So, I wanted to know if there was a better way to do this without having to repeat the #use every time? Or is doing this in each partial that I want to use this mixin in fine?
I'm migrating a Stylus library to SCSS since Angular 12 has deprecated Stylus and I'm in that impacted 0.3%. I've run into something we were doing that I'm not sure how to convert to SCSS—maybe it's impossible.
Let me lay this out simply: I work on several projects that all use loads of the same styles, so we put those styles together into one style sheet in its own NPM package. We can then just grab #import '#company/design/styles'; and suddenly we've got all of our regular styles and variables and mixins available in the project, or we can import #import '#company/package/styles/common'; for just the variables and mixins.
The thing is, our projects might need to configure the library before we import it. Suppose the library contains this bit:
// #company/package/styles/_forms.scss
input:invalid {
background: url('/assets/input-error.svg') no-repeat center right;
}
Not every project will have /assets/input-error.svg at that exact location. Maybe one of my projects has to use /subfolder/static/input-error.svg.
I could include this then overwrite input:invalid { background-image: url(...) } to supply it with the correct location, but there may be many references to this particular file and many other assets on top of that to correct. So we instead, in our Stylus library, we introduced an $asset-input-error variable that points to /assets/input-error.svg by default and did something like this:
// #company/package/styles/_forms.scss
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
// the local project
$asset-input-error: '/subfolder/static/input-error.svg';
#import '#company/package/styles';
The above is heavily simplified and isn't actually legitimate SCSS, but I hope it conveys what we're trying to do: we want to set up what are effectively environment variables in our SCSS, include the common style sheet, and have it use those variables.
The thing is, I'm not sure what the legitimate or idiomatic approach is to do this in SCSS. Unlike Stylus, which has a global scope for its variables, SCSS would have me #use '../config'; and reference config.$asset-input-error, and from outside the library there's no way I see to change the configuration to point that asset to a different location. I'm sure SCSS has a way for me to do this, but I'm not sure what it is. Do I convert the entire library into a giant mixin to which I pass optional configuration? Do I do something with global variables? Something else?
How can I provide variables to my SCSS style sheet to configure it as part of including it in a project?
Ultimately the end goal here is just to be able to say to the library things like: “the assets to reference are here” (very important) or “the error color is this in this particuilar project” (less important).
Using #import
You can use global variables declared before the #import as you stated.
SCSS Documentation for this method
#company/package/styles/_forms.scss
$asset-input-error: '/subfolder/static/input-error.svg' !default;
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
#company/package/styles/styles.scss
#import 'forms';
local.scss
$asset-input-error: '/different/path/input-error.svg';
#import '#company/package/styles';
CodeSandbox Demo
Using #use [...] with
You can also hop aboard the #use train if you prefer to future-proof your library.
SCSS Documentation for this method
SCSS Documentation for using mixins
SCSS Documentation for configuring forwards
#company/package/styles/_forms.scss
$asset-input-error: '/subfolder/static/input-error.svg' !default;
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
#company/package/styles/styles.scss
#forward 'forms';
local.scss
#use 'styles' with (
$asset-input-error: '/different/path/input-error.svg'
);
Sadly CodeSandbox and StackBlitz don't support dart-sass, so I don't have a live demo for this but I tested it on the latest version of sass from npm.
I want to customize Bulma.
I read the document https://bulma.io/documentation/overview/customize/
but I cannot understand.
npm install bulma
cd node_modules/bulma
mv bulma.sass bulma.sass.org
vi bulma.sass
pasted Set your variables code and save named bulma.sass
npm run build-sass
and build error.
please teach me how to ?
First, the best way is not to change the node_module's file content.
The simplest way is to create custom scss file and include Bulma SCSS into it.
#charset "utf-8";
// modify the bulma variables here
$primary: #404BFF;
$navbar-item-img-max-height: 5rem;
$card-header-background-color: $primary;
$card-header-color: white;
$footer-background-color: $primary;
$footer-color: white;
// Import Bulma and Buefy styles
#import "~bulma"; // or fallow the partial import example from docs.
// add custom css here.
Maybe this is the page you need.
Otherwise, if you've installed sass you might choose to follow this step: I'm no npm expert so I chose to download Bulma, create a custom .sass file and let sass generate my css. This path is explained here: https://bulma.io/documentation/customize/with-sass-cli/
This may be bad form but if you write your own css in the html file, you can add !important to override the bulma colors.
i.e. if there's a button color you don't like such as is-primary you can do background-color: blue !important.
Just try not to use !important all over the place.
The better solution would be to download sass -- but I can't help with that. The other answer should help?
I discover that if you set an id="for-example" for a div and then you go to your styles.scss you can create a new class for that id.div like this:
#for-example {
background-color: blue;
}
I don't know if is a bad practice but it works for me!
Using SASS/SUSY,
I am trying to create RTL rules that only apply when [dir="rtl"] is set (dynamically) but my layout is taking on the RTL flow rules by default. How do I do this with SUSY?
I have a Demo here
$default-dir: (
math: fluid,
columns: 12,
gutter-position: split,
gutters: 0,
flow: ltr
);
.boxes{
width: 100%;
display: block;
margin: 0 auto;
max-width: 1280px;
#include clearfix;
#include layout($default-dir);
[dir="rtl"] &{
#include layout(rtl);//I EXPECT THIS LINE TO ONLY APPLY TO RTL [dir="rtl]
background-color: orange;
}
...
}
This is a common confusion between how CSS works, and how Sass works. CSS is DOM-aware, because it is compiled by browsers along with HTML. Sass is working at a different layer, unaware of the DOM structures implied by your CSS.
The layout mixin is a Sass abstraction, changing a few global Sass variables that Susy can refer back to — it has no actual CSS output of its own. The layout mixin changes the output of other functions and mixins that come after it in the Sass. You can also use with-layout() { <content> } to wrap entire blocks of mixins and functions — but in both cases, the variables only exist in Sass.
In order to change the layout based on a selector, you have to provide both layouts in full — not just one layout, and a scoped variable change. That means something more like this:
.box-item {
#include span(1 of 2);
[dir='rtl'] & {
#include span(1 of 2 rtl)
}
}
There are some workarounds to make that less repetitive, but none are as simple and clean as what you hoped for. They basically involve finding ways to compile the same code block twice, with different variables and an extra selector.
In javascript, I usually write as follow to make code clean.
(function(){
doThing1(()=>{doThing2()});
doThing3();
function doThing1(){...}
function doThing2(){...}
function doThing3(){...}
})();
By moving the functions to the end, it make other dev eaiser to read just by look at the first lines to determine how the main function works.
My questions is how can I do this in sass?
I try following and doesn't work:
#include style1();
#include style2();
#include style3();
#mixin style1(){}
#mixin style2(){}
#mixin style3(){}
It complaint that cannot find mixin named 'style1'
You can't do exactly what you're asking for in part because Sass still works off of the cascade part of CascadingStyleSheets. What's below overrides what is above or, in this case, it uses what's above.
There's still a way to separate your logic from your implementation though, through partials. If you put all your mixins in one scss file, _mixins.scss then you can #import it at the top of your actual style rules. That way someone can jump into your project, see that you're using some hypothetical #include make-container(); mixin, then only go into the mixins file if they actually need to see how it works.
You'd have something like:
#import "mixins";
#include style1();
#include style2();
#include style3();
Here's a good article talking about the general ideas of Sass file organization and partials.