I am new to SASS and I just simply follow the steps given on SASS guide website to install SASS but it is not working at all and does not convert my SASS into CSS, like i have taken a variable for colors but it did not work.I think I am missing some major part in this please anyone guide me so i can do my assignment further.
HTML:
<html>
<head>
<title>SASS1</title>
<link rel="stylesheet" type="text/css" href="sass1.scss"/>
</head>
<body>
<div class="container">
<div class="sub_container">
<div class="first_box">
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
</div>
<div class="second_box">
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
</div>
</div>
</div>
</body>
</html>
SASS:
$black_color : #000;
$voilet_color : #2A2E54;
.container
{
width: 602px;
height: 501px;
border: 3px solid $black_color;
background-color: $voilet_color;
margin: auto;
box-sizing: border-box;
}
.sub_container
{
width: 442px;
height: 321px;
border: 10px solid #C1F1FD;
position: relative;
top: 76px;
left: 76px;
-webkit-box-shadow: 0 0 1px #000, inset 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000, inset 0 0 1px #000;
box-shadow: 0 0 1px #000, inset 0 0 1px #000;
}
.first_box, .second_box
{
width: 386px;
height: 114px;
border: 10px solid #FFF189;
margin-top: 18px;
margin-left: 18px;
}
.inner_box
{
width: 30px;
height: 56px;
border: 10px solid #FFB286;
display: inline-block;
margin-left: 19px;
margin-top: 18px;
}
In the terminal, run the following command in the folder where the stylesheets are. It will detect whenever there is a change in .scss file and it will update .css file. This css file has to be referred in the html file.
sass --watch style.scss:style.css
First, you need to compile the .scss files to .css with a sass compiler like http://koala-app.com/. Then, you can access just the .css files in your html.
<link rel="stylesheet" type="text/css" href="sass1.css"/>
Related
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
This is the sample HTML generated from my javascript. Just wondering how come setting display:none; will affect the UI? Below is the code snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.card {
display: inline-block;
text-align: center;
margin: 5px;
padding: 10px;
width: 70px;
height: 100px;
font-size: 26px;
background-color: black;
border: solid 1px black;
color: white;
border-radius: 10px;
}
.holeCard {
/*visibility: hidden;*/
border: solid 1px black;
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
}
</style>
</head>
<body>
<div class="card red">
<span class="dealerCardFace">2</span>
<span class="dealerCardSuit">♦</span>
</div>
<div class="card red holeCard">
<span class="dealerCardFace">7</span>
<span class="dealerCardSuit">♦</span>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//$('.holeCard').eq(1).hide();
$(".holeCard > :nth-child(1)").hide();
$(".holeCard > :nth-child(2)").hide();
</script>
If I remove the display:none, it will look like below which is what I want.
It maybe due to the block has to share same component inside it too. But in your case you should use float: left instead of inline-block
$(".holeCard > :nth-child(1)").hide();
$(".holeCard > :nth-child(2)").hide();
.card {
float: left;
text-align: center;
margin: 5px;
padding: 10px;
width: 70px;
height: 100px;
font-size: 26px;
background-color: black;
border: solid 1px black;
color: white;
border-radius: 10px;
}
.holeCard {
/*visibility: hidden;*/
border: solid 1px black;
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card red">
<span class="dealerCardFace">2</span>
<span class="dealerCardSuit">♦</span>
</div>
<div class="card red holeCard">
<span class="dealerCardFace">7</span>
<span class="dealerCardSuit">♦</span>
</div>
How can I give a border to each letter form a a-text-tag? I need something like this but with A-frames a-text-tag:
p {
font-size: 40px;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<p>lorem ipsum dolor sit amet</p>
Update: I've next situation: Inside my scene I've made some gazebuttons and because you don't know what this buttons do, I've added some text to this buttons. The problem is when I do use a static color for the text in the buttons. Default I use a black color, but on a black background, the text is unreadable. So I'll add a withe border to that text so you could read it.
So the text must stand inside the scene and must rotate inside this scene. In the example code of #ngokevin, the text got a static position.
Use https://github.com/mayognaise/aframe-html-shader
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-html-shader#0.2.0/dist/aframe-html-shader.min.js"></script>
<body>
<a-scene>
<a-plane material="shader: html; target: #planeHTML" position="0 2 -6"></a-plane>
</a-scene>
<!-- HTML to render as a material. -->
<div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden">
<div id="boxHTML" style="background-image: url(cheesecake.png); color: white; width: 500px; height: 500px; font-size: 64px; font-family: monospace; text-align: center">
<p style="background: rgb(30, 30, 30); position: absolute; top: 25px; width: 500px">CHEESECAKE FOR YOU</p>
</div>
</div>
<div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden">
<div id="planeHTML">
<p style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Lorem ipsum</p>
</div>
</div>
I am trying to have a background box behind my text and I cant get it to work. I have done this before and it worked fine, but I can't see where I have gone wrong this time. I have checked to make sure I have linked the CSS to the HTML correctly by changing the background-color, which worked.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="1">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</center>
</body>
</html>
CSS:
body {
color: black;
background-color: black;
margin: 0;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
The problem is not with the HTML / element ID - browsers have supported the "lenient" ID for a long time, which is why it is part of HTML5. While the HTML4 specification is different, if this was a major breaking change it wouldn't be in HTML5 - 'nough said.
The real issue the CSS selector, not the element ID. A CSS selector that begins with a number must have the number escaped.
That is, #1 is an invalid CSS selector while #\31 is valid - and matches elements with id=1.
This is a CSS parsing rule, for backwards compatibility now, and not an HTML or ID restriction. See CSS character escape sequences for gritties on escaping "odd" CSS selectors. Or see the w3c token/lexing train tracks. (For example, the selector to match id=1hello is #\31 hello, with the space - good grief!)
The corrected selector can be verified with this fiddle:
<div id=1>Hello world!</div>
#\31 {
color: blue;
font-size: 30px;
}
That being said, I avoid element IDs that are not trivial CSS selectors to avoid this extra work.
While ids can technically be numbers (in HTML5), it's got weird support in browsers because of backwards compatibility with the HTML4 spec.
ids should start with a letter for compatibility.
<div id="a1">The Online World</div>
and
#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
works as expected.
Element IDs can't start with numbers. As soon as you change that, everything is good: http://jsfiddle.net/gr5956br/
body {
color: black;
background-color: black;
margin: 0;
}
#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="a1">The Online World</div>
<div id="a2"><p>Animation</p></div>
<div id="a3"><p>Creating an app</p></div>
<div id="a4"><p>Mini Game</p></div>
<div id="a5"><p>Gallery</p></div>
<div id="a6"><p>Be Creative</p></div>
<div id="a7"><p>About me</p></div>
</center>
</body>
Your original version with numbers (just so you can see that's the issue):
body {
color: black;
background-color: black;
margin: 0;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="a1">The Online World</div>
<div id="a2"><p>Animation</p></div>
<div id="a3"><p>Creating an app</p></div>
<div id="a4"><p>Mini Game</p></div>
<div id="a5"><p>Gallery</p></div>
<div id="a6"><p>Be Creative</p></div>
<div id="a7"><p>About me</p></div>
</center>
</body>
You can also style the div's for less markup. And then style each link as needed. http://codepen.io/dfrierson2/pen/RNoWZe
body {
color: #fff;
background-color: pink;
margin: 0;
}
div {
width: 7%;
background: #fff;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="1">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</center>
</body>
</html>
Do you mean something like this?
HTML
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div class="background-box" >
<div id="One">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</div>
</center>
</body
CSS
body {
color: black;
background-color: black;
margin: 0;
}
#One{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
You shouldnt use numerical numbers for ID's. Replace with characters and you will be fine.
Fiddle
Hover effect doesn't work. Here is the fiddle: http://jsfiddle.net/6WmnF/
I don't know why. When I remove hover and change the width attribute(as an example) it works. But hover or cursor attribute doesn't work, even when used seperately. I use latest google chrome version.
CSS:
#düzenleyici{
border: 1px solid #000;
width: 550px;
height: 300px;
box-shadow: -1px 1px 4px #000;
display:inline-block;
position:relative;
z-index:-1;
}
#araclar{
width:auto;
height:50px;
background:#AAD3D4;
display:inline-block;
padding:5px 15px 5px 15px;
border-bottom:1px solid #000;
}
#araclar>div{
padding:0 5px 0 5px;
display:inline-block;
border:1px solid #606060;
margin:0 3px 5px 3px;
background:#F6F6F6;
font-family:calibri;
}
#iclik{
border: 1px solid #000;
width: 100px;
height: 267px;
box-shadow: 1px 1px 4px #000;
display:inline-block;
position:relative;
padding:33px 0 0 0;
margin:0 0 0 -5px;
z-index:1;
}
#araclar>div:hover{
cursor:pointer;
}
HTML:
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="tasarim.css" type="text/css"/>
<script>
</script>
</head>
<body>
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
</div>
<div>
Yazı Tipi
</div>
<div>
Yazı Boyutu
</div>
<div>
Kalın
</div>
<div>
İtalik
</div>
<div>
Altı Çizili
</div>
<div>
Resim Ekle
</div>
<div>
Sola Daya
</div>
<div>
Ortala
</div>
<div>
Sağa Daya
</div>
<div>
HTML Düzenleyicisi
</div>
<div>
HTML Kodu Ek
</div>
</div>
</div>
<div id="iclik">
asd
</div>
</body>
<script>
</script>
</html>
I don't know why you set a z-index property for #düzenleyici. If not needed remove it.
Just remove the z-index: -1 into the following section:
#düzenleyici {
z-index: -1;
}
Or change it to a positive value, if you need it.
This is my code Im trying to get it centered in the middle of the page
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>cp</title>
</head>
<body>
<div class="well">
<font face="arial" size="5" color="#000000"><center><b>Control Panel</font></center>
</div>
</style>
<style type="text/css">
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top: 25%;
}
</style>
<div class="span12">
Welcome
</div>
<script src="js/bootstrap.js"></script>
It re-sizes with the page but I cant get the whole thing to be in the center of the page.
I just want the whole thing in the middle of the page
Remove the center tag and set margin-top:25%, It will solve your problem.
CSS
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top:25%; /* new */
}
HTML
<div class="span12">
Welcome
</div>
jsFiddle Live Demo