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.
Related
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.
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
SASS inheritance with #extend is really useful. Something like this is very easy:
.my-base-class {
font-size: 14px;
}
.my-extended-class {
#extend .my-base-class;
color: red;
}
What I would like to be able to do, however, is to redefine rules in .my-extended-class that are defined in .my-base-class. Something like this:
.my-base-class {
font-size: 14px;
}
.my-extended-class {
#extend .my-base-class;
font-size: 18px;
}
In this instance, the font-size is redefined to be 18px in .my-extended-class.
I do realize that I could just add !important to the font-size in .my-extended-class. However, I don't want to do this for two main reasons. #1 I've been taught to avoid !important whenever possible. #2 I actually want to override fairly complex nested properties. Something like this:
.my-base-class {
font-size: 14px;
.child-of-my-base-class {
margin: 10px;
padding: 5px;
background-color: green;
}
}
.my-extended-class {
#extend .my-base-class;
font-size: 18px;
.child-of-my-base-class {
background-color: purple;
}
}
Is something like this possible?
Thanks.
Aaron
Thanks to #BlueCaret for the jsfiddle.
It looks like SASS does indeed do this out of the box; it's just my web compiler in Visual Studio that is broken.
So, question answered. Thanks.
Aaron
I'm struggling to find the variables to how you can change the colouring of the hollow buttons that foundation provides.
At the moment I have to override the styling by doing the below:
&.hollow {
border: 1px solid $clr-primary;
color: $clr-primary;
}
I like having to do most of my styling changes in the foundation settings file instead of taking this approach so I don't have to write more CSS than I need.
Is there a variable that I am missing that I can apply these stylings to in the foundation settings?
According the foundation wiki you find the variables here:
All Foundation projects include a settings file, named _settings.scss. If you're using the CLI to create a Foundation for Sites project, you can find the settings file under scss/ (basic template) or src/assets/scss/ (ZURB template). If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can move into your own Sass files to work with.
— http://foundation.zurb.com/sites/docs/sass.html
Changing the color palette: http://foundation.zurb.com/sites/docs/global.html#changing-the-color-palette
Simply read-up on the ZURB Foundation SCSS Button MIXINS which are explained at the bottom of this page here >>
Here are a few SCSS examples:
div.pagenumber a.pagelink {
#include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:solid);
font-size: inherit;
padding: 0.5em;
margin: 0;
border-radius: $global-radius;
}
div.pagenumber a.pagelink:hover {
#include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:hollow);
text-decoration: none;
font-size: inherit;
padding: 0.5em;
margin: 0;
border-radius: $global-radius;
}
input.cancel {
#include breakpoint(small) {
#include button($expand:false, $background:$darkred, $background-hover:$crimson, $color:$white, $style:solid);
font-size: 0.85rem;
}
#include breakpoint(medium) {font-size: 0.95rem;}
#include breakpoint(large) {font-size: 1rem;}
}
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.