I'm using SCSS compiler extention on VS code still the active class is not getting converted to css format.
I was trying to use this scss file in my code but it won't work properly what to do, I'm new at this please help me.
scss code:
#sideMenu {
background: $lightpurple;
max-width: 280px;
nav {
padding-top: 100px;
a {
display: block;
color: white;
text-decoration: none;
padding: 15px 30px;
&:active {
background: $darkpurple;
border-left: 5px solid $neon;
padding: 15px 30px 15px 30px;
}
}
}
}
Related
A developer recently changed the formatting of my style.css file from:
.header {
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
padding: 15px 10px 0 10px;
height: 80px;
}
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem;
}
.header h3 a {
color: #636c72;
}
.header ul.nav {
margin-top: 4px;
}
to this:
.header {
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
padding: 15px 10px 0 10px;
height: 80px; }
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem; }
.header h3 a {
color: #636c72; }
.header ul.nav {
margin-top: 4px; }
My Question
I can see that the new developer has changed the formatting to a nested style which is fine I guess BUT I'm wondering if this will have any implications on my app which currently uses SCSS? More specifically I'm wondering if the new developer has used SCSS to do this or he's introduced something new to my project which I don't know about.
I have zero knowledge of css hence the question.
I'm completely new to coding, so please be gentle with me! I'm trying to add CSS code to a button, I've tested it in Codepen which shows it as working, but when I've tried it in my browser, it's coming up with a hyperlink, then the code alongside it.
Home
.button
{padding: 10px 24px;
font-family: trebuchet;
Color: #E8DCEC;
Background-color: #ed1c24;
text-align: center;
display: inline-block;
font-size: 16px;
border: 2px solid #8b52a1;
border-radius: 4px;}
.button:hover {
background-color: #72bf44
color: #E8DCEC; }
I'm sure I've missed something totally obvious here, but I've looked over it so much and I can't see anything
CSS code needs to be in <style> or linked in an external CSS document via a link tag
Home
<style>
.button {
padding: 10px 24px;
font-family: trebuchet;
Color: #E8DCEC;
Background-color: #ed1c24;
text-align: center;
display: inline-block;
font-size: 16px;
border: 2px solid #8b52a1;
border-radius: 4px;
}
.button:hover {
background-color: #72bf44 color: #E8DCEC;
}
</style>
csslint.net is throwing errors for the following css and I don't know why. This is pretty normal for css I think. I got the css from this site.
body {
background: #eee !important;
}
.wrapper {
margin-top: 80px;
margin-bottom: 80px;
}
.form-signin {
max-width: 380px;
padding: 15px 35px 45px;
margin: 0 auto;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.1);
.form-signin-heading,
.checkbox {
margin-bottom: 30px;
}
.form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
#include box-sizing(border-box);
&:focus {
z-index: 2;
}
}
input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
input[type="password"] {
margin-bottom: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
Can someone help me? I really don't know what is wrong with it.
It's pretty malformed, run that into any editor with color syntax highlighting and you'll see that there are missing closing parenthesis for a few rules or they are incorrectly nested - you can't nest normal rules in CSS (media queries are an exception).
You'll need to look over your code and make sure you're not trying to nest rules.
Twitter Bootstrap is ment to easily build on top of it. Now I'm experience a problem which I can not solve. I work with TB v. 2.3.2.
In my own style.less file, I included TB:
#import "../bootstrap/less/bootstrap.less";
In the original TB files, forms.less, this LESS can be found:
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: #baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
.add-on {
display: inline-block;
width: auto;
height: #baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: #baseFontSize;
font-weight: normal;
line-height: #baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 #white;
background-color: #grayLighter;
border: 1px solid #ccc;
}
}
So in my own stylesheet after after the #import of the bootstrap files, I trie to change the background-color for .add-on like this (should become pink instead of #grayLighter you find in the above code):
.input-append,
.input-prepend {
.add-on {
color: blue;
background-color: pink;
}
}
Now, the color I have added (blue) is working! This is not overwriting a value, because the .add-on in forms.less did not had any color specified. But as you can see it does have a background-color (#grayLighter), which I want to change! You see that I have specified this to be pink, but it doesn't work. I don't understand this. Can somebody help me out?
I use these Less further down in my stylesheet like this:
div {
.input-prepend;
.form-search .input-prepend;
label {
.input-prepend > .add-on;
}
}
As you can see in below image, the pink background color is not working.
I checked how the output from the LESS in CSS looks, and have written my questions in there as well. The further I'm digging in to this the more I don't understand it, a codepen example DOES SHOW PINK as background, how it should be in my opinion, see working example here: http://codepen.io/willemsiebe/pen/kvmic.
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // FIRST MENTION BG COLOR IN FORMS.LESS
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink; // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}
// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?
#woocommerce_product_search-3 #searchform div label {
color: blue;
background-color: pink; // WHY IS THIS SHOWING UP FIRST?
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // WHY IS THIS SHOWING UP LAST?
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
margin-bottom: 0;
}
20-7-2014: Ok, now I'm really confused! Instead of overwriting it in my own style.less directly, I put the same code in a different less file and imported it with #import, and now its working... but the output in CSS is exactly the same, except from the fact that the background color PINK is now mentioned last!
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink;
}
#woocommerce_product_search-3 #searchform div label {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
color: blue;
background-color: pink; // NOW IT'S MENTIONED LAST!
margin-bottom: 0;
}
Twitter Bootstrap is ment to easily build on top of it.
That's only true for mixins, see also: Bootstrap 3 with LESS: how to handle bootstrap's nested rules?
In stead on mixins (which only work for simple classes) you could try to use the :extend() psuedo class, see: http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin
To style your HTML:
<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>
Try the following Less code:
#import "bootstrap.less";
#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}
}
I have only just started using Sass this morning, after reading about it last night. I think I'm understanding it (but feel free to to comment if you disagree). I've ran into one problem though, be it minor but inducing an OCD head ache.
ul#primary-nav {
font: 400 16px $font-stack;
margin: 0 auto;
text-align: center;
li {
display: inline-block;
margin: 0 15px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
a {
color: $grey;
padding: 10px 5px 15px 5px;
&:hover {
border-bottom: $blue solid 6px;
.active {
font-weight: 700;
}
}
}
}
This outputs the following code:
ul#primary-nav {
font: 400 16px "Lato", sans-serif;
margin: 0 auto;
text-align: center; }
ul#primary-nav li {
display: inline-block;
margin: 0 15px; }
ul#primary-nav li:first-child {
margin-left: 0; }
ul#primary-nav li:last-child {
margin-right: 0; }
ul#primary-nav li a {
color: #777777;
padding: 10px 5px 15px 5px; }
ul#primary-nav li a:hover {
border-bottom: #25aae1 solid 6px; }
ul#primary-nav li a.active {
border-bottom: #25aae1 solid 6px;
font-weight: 700; }
So the code itself is fine for what I want but I was wondering why it is adding the closing paragraph tag to the last line. Is there a way to force it on the line below
ul#primary-nav li a:hover {
border-bottom: #25aae1 solid 6px;
}
I know it's only a small thing but it would make me ever so happy.
Yes it is entirely possible to satisfy your OCD needs: basically you need to make sure the compiler is outputting in expanded style.
From the docs:
Nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
Expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
From the command do this with sass style.css --style expanded, but your build system might also expose the option somewhere - check its docs.