I am new to sass and want to use a variable stored in a file named "_designs.scss". I want to use this variable in a file named "_component.scss". But I am getting "Undefined variable: "$grey-light-2" error. I have tried everything, but nothing is working, please help.
Below is the "_component.scss" file.
#use "designs" as d;
.logo{
height: 3.25rem;
}
.search{
display: flex;
flex: 0 0 40%;
&__input{
width: 90%;
background-color: d.$grey-light-2;
padding: .7rem .2rem;
border-radius: 100px;
border: none;
}
&__button{
outline: none;
}
&__icon{
height: 2.5rem;
width: 2.5rem;
}
}
This is "-designs.scss" file:
$color--primary: #eb2f64;
$color--grey-light-1: #faf9f9;
$grey-light-2: #f4f2f2;
$color--grey-light-3: #f0eeee;
$color--grey-light-4: #ccc;
Two things I can think of:
Check the path (i.e., #use "../../your/path/to/designs";).
If you're using Visual Studio Code extension for compilation, use the one by Glenn Marks.
EDIT
You should rename _component.scss to component.scss.
According to the SASS official website:
A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.
Related
I'm currently following a tutorial that uses .scss but have decided to use .css instead. While I was following the tutorial I tried writing into the .css file but I ran into some compilation issues.
I'm not as familiar with .css so it was hard for me to fix them. I wasn't sure if the problem was with some of the syntax being exclusive to scss. The problem mainly lies in property-list-item.component.css and Property-list.component.css.
https://github.com/zhadjah9559/Wholesale-cli.git
Errors:
ERROR in ./src/app/property/Property-list-item/property-list-item.component.css
Module build failed: Error: Can't resolve 'variables' in 'C:\Users\zach\College\Spring 2019\Senior Proj\Wholesale-cli\src\app\property\Property-list-item'
at doResolve (C:\Users\zach\College\Spring 2019\Senior Proj\Wholesale-cli\node_modules\enhanced-resolve\lib\Resolver.js:180:19)
Pic1
pic 2
Also, does anyone know how to uninstall an extension? I believe i may be having a problem with one of the css formatter extensions i used in visual code.
UPDATE
#import 'variables';
a 6:hover,
a 6:focus {
text-decoration: none;
}
.bsp-card {
border: none;
}
.bsp-card .card-block {
padding-top: 8px;
}
.bsp-card .card-subtitle {
margin: 0px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
color: #16861a;
}
.bsp-card .card-title {
font-size: 19px;
margin: 3px 0;
}
.bsp-card .card-text {
font-size: 14px;
font-weight: 300;
color: #7e7e7e;
margin-bottom: 0;
}
When you generate a new project you need to select CSS on generation like this
Your CSS file is trying to import a variables scss file that doesn't exist.
#import 'variables';
Remove that, but make sure there's no references to variables inside the css file.
When i am compiled my style.scss file then compiler through error following
Property " " must be followed by a ':'
When i have add following css is style.scss file then getting error
.custom-file-input:lang(en)~.custom-file-label::after {
content: "Browse";
padding: 8px 20px;
height: 35px;
}
.custom-file label {
width: 100%;
height: 37px;
padding: 8px 15px;
}
i faced the same problem when i had a mistake in naming my sass file. Now i understand that that issue stems from a sass syntax error or wrong filename imports
I've been using Bootstrap v3 for too long in my projects. I usually worked with LESS, as I found it was the best way to handle my custom styles. E.g. if I wanted to create a custom navbar, all I had to do was to write something like this:
#navbar-height: 80px;
#navbar-default-bg: #f0f0f0;
#navbar-default-link-color: #999;
#media(max-width: #screen-xs-max) {
.navbar-btn {
height: 50px;
line-height: 50px;
padding: 0 10px;
margin-top: (#navbar-height - 50px) / 2;
margin-bottom: (#navbar-height - 50px) / 2;
}
}
(this code is just an example and doesn't make any sense)
One of my clients insisted I had to use SCSS for a new project, however variable there just didn't work (I used the SCSS version of Bootstrap v3). Should SCSS variables be handled in a different way?
Don't all CSS preprocessor need to be converted to CSS in order to run it in a browser ?
So does it really matter if you write it in SCSS or LESS, since ultimately the code will be compiled as CSS right ?
Anyway, back to your question,
I think it would work if instead of #, you put $
$navbar-height: 80px;
$navbar-default-bg: #f0f0f0;
$navbar-default-link-color: #999;
$media(max-width: $screen-xs-max) {
.navbar-btn {
height: 50px;
line-height: 50px;
padding: 0 10px;
margin-top: ($navbar-height - 50px) / 2;
margin-bottom: ($navbar-height - 50px) / 2;
}
}
you should get a better idea if you read this
CSS preprocessors
Precursor:
Under normal circumstances, I would never do this.
I have a CSS file that I am currently collaborating on with another person. I built the file initially, then they have added rules to it after the fact. But, instead of adding rules to selectors that already exist, they have duplicated selectors everywhere. I don't even want to get into how disorganized the file has become. The problem is that the duplicated selectors are spread out all over the file now and it could take some time to sort it out.
Anyway, I am currently in the process of trying to clean up the file. I have tried beautify, css format, etc in my editor (ST3), which cleans up fine but still leaves the duplicate selectors. I have tried various online tools like CSS Lint, ProCSSor, Dirty Markup, CleanCSS and so far none of these tools give me the desired result.
Is there any way that these selectors can be merged by some other means instead of manually?
Here's an example of my situation, just for reference:
I'd like to turn this...
.sameClass {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.differentClass {
border: none;
background: black;
padding: 0;
}
.sameClass {
font-weight: bold;
font-size: 24px;
display: inline-block;
}
into this...
.sameClass {
float: left;
width: 100%;
margin: 0;
padding: 0;
font-weight: bold;
font-size: 24px;
display: inline-block;
}
.differentClass {
border: none;
background: black;
padding: 0;
}
CSSO (Github project) is the tool will help you merge identical CSS classes.
It can be configured to execute some cleaning, compaction and restructuring.
Test in sandbox here : https://css.github.io/csso/csso.html
// Input
.card {box-shadow: none;}
.foo { color: #ff0000; }
.bar { color: rgba(255, 0, 0, 1); }
.card {border: 1px solid grey;}
// Output compacted + merged
.bar,.foo{color:red}
.card {box-shadow: none;border: 1px solid grey;}
A simplistic approach would be to sort your CSS file(s) by selector. This can be done by considering each rule as a "paragraph" (meaning you will have to ensure there are empty lines between rules, and nowhere else), and then using your editor's "sort paragraph" feature, if it has one. For instance, emacs has the M-x sort-paragraphs command.
Once multiple rules for the same selector are grouped together, you can manually go in and combine them.
I have the following SCSS code:
#appMain {
margin-right: 25em + 1em;
}
#appLeft {
float: left;
width: 100%;
padding-left: 1em;
}
#appRight {
float: right;
width: 25em;
margin-right: -25em - 1em;
}
Now I want to use parameters, so I created 2 variables
$rightDimension: "25em";
$marginBetween: "1em";
When I change the code this way
#appMain {
margin-right: $rightDimension + $marginBetween;
}
Instead of getting 26em, I now get 25em1em resulting in invalid css and thus, the property doesn't apply.
What am I doing wrong? How can I do this simple math with SASS?
Since you quoted the values, Sass treats them as strings rather than values and does a concatenation instead of an addition (like Javascript would do it as well).
Simply omit the quotes to make it work.
$rightDimension: 25em;
$marginBetween: 1em;
working example