My index.html contains links to sass files
<head>
<link rel="stylesheet" href="#/sass/reset.sass" />
<link rel="stylesheet" href="#/sass/keyframes.sass" />
<link rel="stylesheet" href="#/sass/classes.sass" />
</head>
When try to build, get errors This selector doesn't have any properties and won't be rendered. for all rows in all sass files
part of classes.sass
.ripple
width: 0
height: 0
#include border-radius(50%, 50%, 50%, 50%)
#include themed
background: t('link-active-bg')
transform: scale(0)
position: absolute
opacity: 1
&-effect
animation: ripple .45s linear
Related
I'm practicing with SCSS and two minutes ago my code was working, before splitting the variables and creating the folder structure.
But now, no matter what I change, there's no way to change the font. It just loads with Times New Roman.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/icon-font.css"> -->
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Tours</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/logo-white.png" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens.</span>
</h1>
Discover our tours
</div>
</header>
</body>
body {
font-family: "Lato", sans-serif;
font-weight: 400;
/*font-size: 16px;*/
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
.heading-primary {
color: $color-white;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
The imports are ok, so it should be working.
Your code is working fine in jsfiddle. It's displaying Lato as the font. Did you try clearing your cache? You could also try changing the link to:
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap" rel="stylesheet">
This will give an unlimited swap period to load the font if it takes to long to download before render.
m newbie to sass i have this html file to which i hve applied sass
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="sass/app.scss" rel="stylesheet" >
</head>
<body>
hhhhhhhhhhhhhhhhhhhhhhhhhhllllllllllllll
</body>
</html>
and my app.scss
#import "../node_modules/bootstrap/scss/bootstrap";
body {
font: 100% $font-size-lg;
color: $red;
}
these body scss is not getting applied to the html file any help would be appreciated
app.scss
$primary: #3498db;
$secondary: #e67e22;
$success: #2eeeff;
$danger: #e74c3c;
#import "../node_modules/bootstrap/scss/bootstrap.scss";
/*# sourceMappingURL=styles.css.map */
html
<link href="scss/app.css" rel="stylesheet" />
here's my HTML file with h1, p and span tags :-
<!DOCTYPE html>
<html>
<head>
<title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>
here's my CSS file that incorporates .ttf file to style the font of an element or contents in a tag :-
#font-face {
font-family: 'myFirstFont';
src:
url('fonts/CoHeadlineCorpFont/Co-Headline-Corp-Light.ttf');
format('truetype');
font-style: normal;
font-weight: 100;
}
.myFontStyling {
font-family: 'myFirstFont';
}
h1 {
font-family: 'myFirstFont', sans-serif;
font-weight: 100;
}
here's my directory structure :-
fontsByArchi
-fonts
-CoHeadlineCorpFont
-Co-Headline-Corp-Light.ttf
-index.html
-style.css
I am unable to get the font effect on my texts, what could be the reason?
I believe you forgot to refer external css file in html page. After adding <link rel="stylesheet" type="text/css" href="style.css"> tag inside <head> I was above see it getting applied.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>
I am trying to get polymer installed and running my mac. I have downloaded all the files needed but when I use insert a test file I get an error saying that the "polymer field is not recognized". Can someone help please.Thanks.
<!DOCTYPE html>
<html>
<head>
<!-- Load platform.js for polyfill support. -->
<script src="bower_components/bower_components/platform/platform.js"></script>
<!-- import a custom element. -->
<link rel="import" href="bower_components/bower_components/polymer-ui-field/polymer-ui-field.html">
<link rel="import" href="bower_components/bower_components/polymer-ui-icon/polymer-ui-icon.html">
<!-- add a wee bit of styling. -->
<style>
html {
font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
font-size: 14px;
}
polymer-ui-field {
border: 1px solid #000;
margin: 10px;
height: 40px;
}
</style>
</head>
<body>
<polymer-ui-field>
<polymer-ui-icon icon="favorite"></polymer-ui-icon>
<input placeholder="This is a simple Polymer test using the polymer-ui-field and the polymer-ui-icon." flex>
</polymer-ui-field>
</body>
</html>
Your imports and script tag have bower_components doubled up. If this does not accurately reflect your file structure, you should remove the extra bower_components. If this does reflect your file structure, you should un-nest the second bower_components folder, as this may be interfering with relative file path references in the imported components.
Please can someone point me in the right direction! I can't get the queries to work as intended.
So, I have for example:
<link rel="stylesheet" href="/480.css" type="text/css" media="screen and (max-width:480px)" />
<link rel="stylesheet" href="/768.css" type="text/css" media="screen and (max-width:768px)" />
<link rel="stylesheet" href="/960.css" type="text/css" media="screen and (min-width:960px)" />
In the 480 stylesheet:
#box{width:100px;height:100px;}
In the 960 stylesheet:
#box{width:200px;height:200px;}
When I resize the browser to 480px or less the 960 style is overriding the 480 style. I have tried loading all queries in the one stylesheet and I've tried using separate stylesheets for different resolutions but still not working. When testing it in either Chrome or FF Aurora it makes no difference.
What am I doing wrong? Thanks!
Works perfectly for me:
http://felixebert.de/so-12811458/
Is the path to the css files correct?
Is the HTML Doctype correct (<!DOCTYPE html>)?
Do you mix an id-reference with a class-reference? (#box = <div id="box" />, .box = <div class="box" />)
What's in 768.css?
Try this:
<style>
#media screen and (max-device-width: 480px),
screen and (max-width: 960px) {
#box{width:100px;height:100px;outline:1px solid red;}
}
/* Still small! (but scaling up) */
#media screen and (min-width: 960px) {
#box{width:200px;height:200px;outline:1px solid red;}
}
</style>
http://jsfiddle.net/sthAngels/EecJD/