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.
Related
I have the following SASS code.
How would I do the exact same but using the BEM methodolgy?
nav.primary ul {
border-top: 2px solid $darkgreen;
display:block;
margin:10px 0 0 0;
padding: 25px 0 0 0;
li {
background-color:#004f5a;
display: inline-block;
float: none;
margin-left:0;
padding: 5px 0;
text-align: center;
width: 100%;
a {
color:#fff;
letter-spacing: 0.5px;
&:hover {
color:$darkgreen;
}
}
}
}
For example, make a block .primary-nav with three elements .primary-nav__ul, .primary-nav__li, .primary-nav__a.
.primary-nav {
&__ul {
border-top: 2px solid $darkgreen;
display: block;
margin:10px 0 0 0;
padding: 25px 0 0 0;
}
&__li {
background-color: #004f5a;
display: inline-block;
float: none;
margin-left: 0;
padding: 5px 0;
text-align: center;
width: 100%;
}
&__a {
color:#fff;
letter-spacing: 0.5px;
&:hover {
color: $darkgreen;
}
}
}
BEM is a naming convention for classes (distinguishing identifiers and modifiers); the concept is to create ,very strict, single class selector.
The way this is achieved is through SCSS ampersand selector;
In your scenario , since you're markup doesn't combine classes to customize elements, it doesn't make much sense.
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.
I'm setting up a Jekyll page and the current theme I'm using uses Sass, but GitHub pages (where I'm hosting it) does not support Sass. So I'm trying to convert my .scss files to .css but I'm getting the an error on this file:
---
---
#import 'syntax';
$site-background-color: #f5f5f5;
$contrast-color: #333;
$azul-accent-color: #0070bb;
$ruby-accent-color: #e0115f;
$amber-accent-color: #ff7e00;
$avocado-accent-color: #568203;
/*============================================================================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: $site-background-color;
border-top: 5px solid $contrast-color;
font-family: 'Source Sans Pro', sans-serif;
color: $contrast-color;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl,
blockquote,
table,
img,
hr,
.fluid-width-video-wrapper,
.highlight {
margin-bottom: 20px;
}
blockquote {
padding: 0 30px;
border-left: 2px solid darken($site-background-color, 15%);
}
ul, ol {
margin-left: 40px;
}
img {
max-width: 100%;
height: auto;
border: none;
outline: none;
}
a {
text-decoration: none;
}
hr {
border : 0;
height: 25px;
background : url(/public/images/eagle.png) center center no-repeat;
}
code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-size: .8rem;
}
p code {
padding: 0px 5px;
border: 1px solid #ddd;
background-color: #f8f8f8;
border-radius: 3px;
white-space: nowrap;
}
table {
border-collapse: collapse;
border: 1px solid $contrast-color;
td, th {
border: 1px solid $contrast-color;
padding: 5px 10px;
}
thead {
background-color: darken($site-background-color, 10%);
}
}
// TODO: make dt smaller
dt {
float: left;
width: 30%;
font-weight: bold;
}
dd {
float: right;
width: 70%;
}
footer {
font-size: .8rem;
text-align: center;
}
/*============================================================================*/
.azul { a { color: $azul-accent-color;
&:hover { color: darken($azul-accent-color, 20%);
}}}
.ruby { a { color: $ruby-accent-color;
&:hover { color: darken($ruby-accent-color, 20%);
}}}
.amber { a { color: $amber-accent-color;
&:hover { color: darken($amber-accent-color, 20%);
}}}
.avocado { a { color: $avocado-accent-color;
&:hover { color: darken($avocado-accent-color, 20%);
}}}
/*----------------------------------------------------------------------------*/
.highlight {
padding: 30px;
border-radius: 6px;
background-color: #272822;
color: #f8f8f2;
line-height: 1;
code {
font-size: .7rem;
}
}
.container {
max-width: 750px;
padding: 0 20px;
}
.center {
text-align: center;
}
.right {
float: right;
margin: 0 0 20px 20px;
}
.left {
float: left;
margin: 0 20px 20px 0;
}
.top-navbar {
margin-bottom: 40px;
height: 110px;
a {
display: inline-block;
color: $contrast-color;
padding: 66px 20px 25px;
margin-right: 10px;
margin-top: -5px;
text-transform: uppercase;
border-radius: 0 0 5px 5px;
border-bottom: 1px solid lighten($contrast-color, 10%);
transition: all ease-in-out .3s;
&:hover,
&.current-page {
color: $site-background-color;
border-bottom: none;
}
&:hover {
background-color: $contrast-color;
transform: translateY(5px);
}
&.current-page {
background-color: $contrast-color;
}
}
}
.archive,
.single {
margin-bottom: 100px;
}
.single {
font-size: 1.125rem;
line-height: 28px;
}
.single time {
color: #999;
font-size: .9rem;
}
.bundle {
border-top: 1px solid lighten($contrast-color, 50%);
padding-top: 10px;
margin-bottom: 10px;
}
.post-date {
text-align: right;
}
.not-found {
margin-top: 150px;
text-align: center;
font-size: 2rem;
}
.not-found h1 {
font-size: 8rem;
}
dl,
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
dl,
.clearfix:after {
clear: both;
}
/*============================================================================*/
#logo {
display: inline-block;
height: 110px;
width: 110px;
background-size: 90px 90px;
background-position: left center;
background-repeat: no-repeat;
}
/*============================================================================*/
#media screen and (max-width: 767px) {
.top-navbar {
height: 35px;
text-align: center;
margin-top: 40px;
a {
padding: 5px 10px;
margin: 5px;
border-radius: 0;
border: 1px solid $contrast-color;
transition: none;
&:hover {
transform: none;
}
}
}
.bundle,
.post-date {
text-align: center;
}
.bundle article {
margin-bottom: 30px;
}
#logo {
background-position: center center;
}
}
The error is:
Line 1: Invalid CSS after "-": expected number or function, was "--"
I imagine there is a quick fix for this that I am missing since I am not familiar with Sass at all. Am I right? Anyone know how I can fix this?
Also, I'm using the following command to convert from scss to css sass --watch main.scss:main.css if anyone knows of a better way please let me know!
Thanks for any help!
You have two lines of --- at the beginning of your file; what is it you think they're doing? Remove them, they're syntactically invalid and they're causing your errors.
Jekyll 2 brings native Sass compilation and the two lines of triple dashes are in fact required in order for Jekyll to compile the Sass file:
http://jekyllrb.com/docs/assets/
If you are not yet using Jekyll 2, then this will not work of course. If you are using Jekyll 2 then you can do this and no longer require a sass --watch command, Jekyll will do that automagically.
you probably had the same problem as me that the _config.yml is not at your root directory. If you don't want to change your file structure, you can set a new repo and add the jekyll files in a new gh-pages branch. I wrote a blog about it: http://shinshinwu.github.io/myblog/jekyll/update/2014/12/21/welcome-to-jekyll.html
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.
I am not very good at this I know some but I am having some issues with my CSS I can not figure out.
My mainContent ID overlaps with under my Sidebar ID. I am sure I messed up my css trying to fix this but I have no idea how to fix t his. I have changed things so many times I have become lost.
Any help would be nice.
#charset "utf-8";
body {
background: #A00;
margin: 0;
text-align: center;
color: #A00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
float: right;
}
.twoColHybLtHdr #header {
background-image:url(img/background3.png);
padding: 12px;
background-repeat: repeat-x;
background-position: left;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 14em;
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #sidebar1 h3, {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
}
.twoColHybLtHdr #footer {
padding: 50px 8px;
background:#FFFF99;
background-color: #FF9;
}
.twoColHybLtHdr #footer p {
font:Georgia, "Times New Roman", Times, serif, 10px;
margin: 0;
padding: 10px 0;
border-color: #666666;
}
.fltrt {
float: right;
margin-left: 10px;
}
.fltlft {
float: left;
margin-right: 10px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColHybLtHdr #table {
font:
margin: 0;
padding: 10px;
color: #FFF;
y background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
Make sure you specify a width on BOTH the .fltrt and .fltlft columns
Your css should look like this:
/** Assuming the parent element (container) is 940px wide **/
.fltlft {
float: left;
width: 540px;
}
.fltrt {
float: right;
width: 380px;
}
Also, make sure you replace/remove **y** with .y and remove that unused **font** attribute.
Not sure what's happening as there isn't a visual on whats actually happening.
.twoColHybLtHdr #sidebar1 h3, {
Just remove the , and all should be good
The bottom there is a few errors.
.twoColHybLtHdr #table {
**font:**
margin: 0;
padding: 10px;
color: #FFF;
**y** background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
I'm guessing it should be more like
.twoColHybLtHdr #table {
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 10px;
color: #FFF;
.y{
background-color: #8B0000;
background-color: #A00;
border: #A00;
}
Take the float right off of the container
put a float left on the main content
add a div after the main content that clears both.
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
******** removed Float:right;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 210px; ****** Change this to pixels unless you are specifying the font-size as !important otherwise you could have problems with this width scaling unintentionally.
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
float: left; ****** Added float left to mesh it with your sidebar float right would work as well but wouldn't mesh it with your floated sidebar.
}
*********** add another div after your mainContent and assign it the ID="clear"
.twoColHybLtHdr #clear {
clear: left;
}
There are some other errors in your css but I think these are the ones where you are having your problems.