I am having a problem in importing scss file.
I created a file, named, main.scss and write some code there.
All codes are working fine and reflecting the webpage.
then I created two folders, settings, and elements.
In settings, I created a file named, _colors.scss and defined some colors variable.
In elements, I created a file, named, _typography.scss and defined some code.
Now I wanted to import them into main.scss
but they couldn't import. I don't know why. Kindly help me.
Here is my final code.
/src/css/main.scss:
#import "elements/typography";
#import "settings/colors";
/src/css/elements/_typography.scss:
a {
line-height: inherit;
cursor: pointer;
border-bottom: 1px solid;
text-decoration: none;
color: $primary-colour;
word-break: break-all;
word-break: break-word;
&:visited {
border-bottom: 1px solid;
}
&:hover {
border-bottom: none;
}
&:active {
color: $primary-colour;
}
&:focus {
border: none;
}
}
/src/css/settings/_colors.scss:
$primary-colour: rgb(32, 221, 174);
Your path is incorrect. Try this:
/src/css/main.scss
#import "./settings/_colors";
#import "./elements/_typography";
Also note that #import "./settings/_colors"; goes first. Because you need your $primary-colour inside #import "./elements/_typography";
Related
I have some styles:
tokens.scss
.text-center {
text-align:center;
}
.bold {
font-weight: bold;
}
#mixin text-style-1 {
font-size: 1.2rem;
font-weight: bold;
}
component/card.scss
#use "../token.scss" as tokens;
.card {
#include tokens.text-style-1;
border: 1px solid #333333;
}
index.scss
// import components
#use component/card.scss
// import tokens
#use tokens.scss
When I compile index.scss I would like the styles from tokens.scss to be included after my component styles, but because I #use the mixins from tokens.scss in my components it's always imported before and not in the order defined in index.scss.
Is there anyway to just include the mixins from tokens.scss without importing all the styles before my components? Or is there anyway to define an import ordering when using #use?
The only way I've found to fix this issue is by replacing #use with #import in index.scss, but this obviously duplicates the styling which isn't ideal.
What you should do is take the mixin in a separate file. Unfortunatly, #import and #use will bring the styling with them.
From the SASS documentation
// src/_corners.scss
$radius: 3px;
#mixin rounded {
border-radius: $radius;
}
And then
// style.scss
#use "src/corners" as c;
.button {
#include c.rounded;
padding: 5px + c.$radius;
}
EDIT : added the ouput
.button {
border-radius: 3px;
padding: 8px;
}
I cannot seem to find anyone else having this problem with the #use rule, what am I doing wrong?
Using #import produces expected css, using #use there are no errors but the resulting file is not the expected css... below is a simplified version of the issue,
// lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
// code.sass
code
padding: .25em
line-height: 0
// main.sass
#use 'code'
#use 'lists'
// main.css
// producing exactly...
#use 'code' {}#use 'lists' {}
// main.css
// should produce...
code {
padding: .25em;
line-height: 0;
}
ul, ol {
text-align: left;
}
ul ul, ol ol {
padding-bottom: 0;
padding-left: 0;
}
if I try #use to #include #mixin I get error "no mixin {mixin name} found", if I add the namespace corner.rounded I get the error "Invalid CSS after " #include corners": expected "}", was ".rounded;""
// corners.sass
$radius: 3px
#mixin rounded
border-radius: $radius
// main.sass
#use "corners"
.button
#include rounded
padding: 5px + $radius
using #import...
// main.sass
#import "corners"
.button
#include rounded
padding: 5px + $radius
produces expected css...
.button {
border-radius: 3px;
padding: 8px; }
#use is only supported by dart-sass. As you are using node-sass this doesn't work for you. You have to use #import instead.
thanks to Gh05d (I marked his answer as useful) I found the documentation and installed "dart".
npm install --save-dev sass
and added a command to my package.json file:
"dart_build_css": "sass sass/main.sass stylesheets/main.css",
I used these sass source file test:
// corners.sass
$radius: 3px
#mixin rounded
border-radius: $radius
// main.sass
#use "corners"
.button
#include corners.rounded
padding: 5px + corners.$radius
and got the expected css output:
.button {
border-radius: 3px;
padding: 8px;
}
/*# sourceMappingURL=main.css.map */
Hello currently I'm learning CSS and I seeing CSS Custom property. I was trying to create a variable on VS-Code and run it using LiveServer but my variable doesn't seem work. Is there anything that I need to enable first in order to use CSS Variable on Chrome/Firefox? How to enable it? Thanks.
I'm using Firefox 68.9.0esr (32-bit) and Chrome 83.0.4103.116 (Official Build) (64-bit)
My css variable only like this:
#import url('http://fonts.googleapis.com/css2?family=Montserrat:wght#400;600&display=swap')
:root {
--mistyrose: #ffe4e1;
--blue: #118add;
--green: #71cf17;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--mistyrose);
/* center content */
margin: 0 auto;
width: 85%;
border-right: 3px solid var(--blue);
border-left: 3px solid var(--green);
}
Well, you missed a semicolon (;) in your #import statement so your :root elements will be ignored and won't affect at all.
If you fix it, it should be something like this and your code will work well as expected:
#import url('http://fonts.googleapis.com/css2?family=Montserrat:wght#400;600&display=swap');
:root {
--mistyrose: #ffe4e1;
--blue: #118add;
--green: #71cf17;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--mistyrose);
/* center content */
margin: 0 auto;
width: 85%;
border-right: 3px solid var(--blue);
border-left: 3px solid var(--green);
}
How do I compile my custom bootstrap SCSS file into a CSS file which contains only the class I created in my custom file?
For instance. I'm trying to remove the the extra CSS classes added to my HTML.
Instead of writing the following HTML:
<h4 class="border-bottom p-2 mb-4">
Blah Blah
<span class="badge badge-secondary badge-pill float-right">100</span>
</h4>
I was trying to write (removing all the class attributes):
<h4>
Blah Blah
<span>100</span>
</h4>
For this I created a custom.scss file with the following content:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/utilities/borders";
#import "bootstrap/scss/utilities/spacing";
#import "bootstrap/scss/utilities/float";
#import "bootstrap/scss/badge";
h4 {
#extend .border-bottom;
#extend .p-2;
#extend .mb-4;
}
h4 span {
#extend .float-right;
#extend .badge;
#extend .badge-pill;
#extend .badge-secondary;
}
The compiled CSS file contains 1000+ lines of CSS? Why?
It contains stuff like "badge-dark", all the padding and margin stuff etc., which I don't want to use nor they needed. How to get rid of it? I only need a CSS containing the relevant CSS instructions I wrote in my custom.scss file.
The result I thought, should look something like this:
h4 {
border-bottom: 1px solid #dee2e6 !important;
margin-bottom: 1.5rem !important;
padding: 0.5rem !important;
}
h4 span {
float: right !important;
display: inline-block;
padding: 0.25em 0.4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
h4 span:empty {
display: none;
}
padding-right: 0.6em;
padding-left: 0.6em;
border-radius: 10rem;
color: #fff;
background-color: #6c757d;
h4 span[href]:hover, h4 span[href]:focus {
color: #fff;
text-decoration: none;
background-color: #545b62;
}
}
But it isn't.
Edit:
If I change my custom.scss to something like this:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
$theme-colors: (
"secondary": $secondary,
);
h4 {
border-bottom: $border-width solid $border-color;
padding: map_get($spacers, 2);
margin-bottom: map_get($spacers, 4);
}
#import "bootstrap/scss/badge";
h4 span {
#include float-right;
#extend .badge;
#extend .badge-pill;
#extend .badge-secondary;
}
The resulting CSS will mostly contain the required styles. But I thought it woud be possible to rely on the bootstrap classes instead of searching through the bootstrap SCSS and picking up the required stuff and merge it somehow into my custom.scss. I thought it would be easier?
Your code works, but you are extending classes not placeholders. This is the big difference, here.
Example extending classes (your case)
.border-bottom {
border-bottom: 1px solid #dee2e6 !important;
}
h4{
#extend .border-bottom;
}
The result is a group of CSS rules 'cause also .border-bottom class exists in your CSS:
.border-bottom, h4 {
border-bottom: 1px solid #dee2e6 !important;
}
With placeholder, instead, the things are different:
%border-bottom {
border-bottom: 1px solid #dee2e6 !important;
}
h4{
#extend %border-bottom;
}
The result is what you expect, I think:
h4 {
border-bottom: 1px solid #dee2e6 !important;
}
I found here a very good article about this difference: http://thesassway.com/intermediate/understanding-placeholder-selectors
So, when you import all those Boostrap4 files, Scss creates all those .class rules (for this you have 1000+ code lines) that you use to extend.
Then, when you write for example this:
h4 {
#include float-right;
#extend .badge;
#extend .badge-pill;
#extend .badge-secondary;
}
Your result will be:
h4 {
float: right !important; /* your #include */
}
But also:
.badge-secondary, h4 {...}
.badge-pill, h4 {...}
.btn .badge, .btn h4 {...}
.badge:empty, h4:empty {...}
.badge-secondary[href]:hover, h4[href]:hover, .badge-secondary[href]:focus, h4[href]:focus {...}
.badge, h4 {...}
I am looking for a way to conditionally include content based on a context. The two output files will pull in the same sass files but just process them differently. I would imagine it to work similarly to the #content mixin just without pulling in all the other styles outside of the mixin at the same time. I just need the body of what is included in the mixin. Does anyone have any ideas how I can achieve this?
It is very similar to what https://github.com/at-import/jacket does but without the compass dependency. I have included an example so you can see what kind of thing I am after:
// _styles.scss
h1 {
color: red;
}
h2 {
color: green;
}
#include critical {
.someModule {
background-color: red;
height: 50px;
}
}
These would then be imported into two separate stylesheets like so
// output.scss
#import "styles";
// critical.scss
#import "styles";
But when the SASS compiles you would end up with:
// output.css
h1 {
color: red;
}
h2 {
color: green;
}
// critical.css
.someModule {
background-color: red;
height: 50px;
}
Instead of output.css and critical.css both including the content:
// output.css and critical.css
h1 {
color: red;
}
h2 {
color: green;
}
.someModule {
background-color: red;
height: 50px;
}