Questions tagged [sass]

Sass is a CSS preprocessor which enables advanced features not available in normal CSS.

Filter by
Sorted by
Tagged with
12 votes
1 answer
296 views

Comments on SASS from CSS for a SASS beginner

I've leaped into SASS and am loving it. I'm asking for comments here on whether my SASS is well-formatted. Here's the original CSS based on Zurb's Foundation Pagination styles, but adapted for use ...
Mere Development's user avatar
10 votes
1 answer
546 views

Lightweight Angular tooltip component

I made a small Popup component to show different error/success...etc. messages. Template: ...
Embrioka's user avatar
  • 313
8 votes
1 answer
233 views

Improve mixin that outputs page-specific CSS

As part of this answer, I created a mixin to generate some page-specific CSS for me. I need to style an element based on a class I assign to the html-element. I do ...
kleinfreund's user avatar
  • 3,681
8 votes
2 answers
499 views

Improve page-specific CSS for different color schemes

For a website with four pages (blog, portfolio, profil and impressum) I have four different color schemes (for links, headings, code, etc.). This results in bloated CSS which I want to reduce. Here ...
8 votes
1 answer
716 views

Google material ripple button effect

I have "translated" this example built with jQuery in vanilla JavaScript, but I'd like to know if there are better ways to do it. The jQuery version uses offset() ...
AlexDom's user avatar
  • 181
7 votes
1 answer
905 views

Photo gallery layout

I'm working on a photo website, the markup looks like this: ...
Maurice Perry's user avatar
6 votes
3 answers
1k views

Toggle menu under specified screen width

I've created a simple toggle menu in jQuery, which is capable of specifying a breakpoint, but I'm afraid my code is too complicated. How can I make it simpler? I also have a question about ...
kr099's user avatar
  • 151
6 votes
1 answer
224 views

Small Bayes Calculator to learn Javascript

I am trying to learn UI design so I threw together a Bayes Calculator (i.e. calculate the posterior probability of being sick given a positive/negative test result using the specificity, sensitivity ...
Felix B.'s user avatar
  • 163
6 votes
1 answer
83 views

Member list reveals member information on click (#2)

Not a follow-up, but related to Member list reveals member information on click (#1). I now want my CSS reviewed. What I'm doing? The content in a list of members is revealed by jQuery (see review #...
kleinfreund's user avatar
  • 3,681
6 votes
1 answer
538 views

Resizable split DIVs Vue.js

I just started Developing Web App (Vue.js) for my company for around 1-2 months. Therefore, my knowledge and experience in HTML, CSS and Javascript is kinda shallow. I've created a custom resizable ...
Muhammad Azizi Abdul Aziz's user avatar
6 votes
2 answers
178 views

Start of a responsive website for a legal firm

Please have a look at the HTML/CSS/JS (there is very little JS at the moment) and give me some feedback as to how my code looks to you, what level of skills it looks like I have and how I can improve. ...
Paula Hightower's user avatar
6 votes
1 answer
1k views

Grid column size calculation

I have a one function to calculate all the possible widths plus the margins for the gutters. In this same function, the grid ...
Bas's user avatar
  • 699
5 votes
2 answers
685 views

Good practice using SCSS [closed]

I saw a sassy CSS for a rails app like this: ...
ssri's user avatar
  • 247
5 votes
1 answer
480 views

Adding flair to PHP page with Sassy (SCSS)

This is what I've done so far: ...
wyc's user avatar
  • 565
5 votes
1 answer
699 views

Sass code for displaying two simple search forms

Sass code for creating a basic search box. Resulting CSS used for two that are different widths. The goals is to define sass that generates CSS that is easily re-usable as well as concise and ...
Toni Leigh's user avatar
5 votes
1 answer
138 views

SASS grid system improvements

I've got this own made grid system made in SASS: ...
Bas's user avatar
  • 699
5 votes
0 answers
95 views

SASS script to generate Pygments / Rogue stylesheet output

I've written some SASS code to generate a Pygments syntax highlighter style sheet (which are, by extension, compatible with Rouge). Such a stylesheet is normally generated by the ...
Martijn Pieters's user avatar
4 votes
1 answer
86 views

Keyframes animation

Is there a way I could simplify this with Sass or JS? It works, but it's not what I'd call 'DRY' code. An alternate form I've tried is a Sass for loop but can't get ...
Daniel_Knights's user avatar
4 votes
3 answers
1k views

Mixin, @extend or (silent) class?

I am struggling with the basic concepts of SASS. I have a page that has multiple section, all of them are sharing properties like width, ...
Wottensprels's user avatar
4 votes
1 answer
67 views

Compile SASS files in a directory via Gulp.js tasks, one of which produces logging output

If the default task is executed here, the file name to be compiled is passed to the argument of the CompileSass function. When ...
alihasan's user avatar
4 votes
1 answer
163 views

Render SVG background with Gradient

I'm new to and still fairly confounded by SVGs. I'm feeling pretty happy with the following hobbled together SCSS code demonstrated here: ...
MikeiLL's user avatar
  • 630
4 votes
1 answer
82 views

Innefficient scss selectors being generated

Im using Foundation by Zurb as a front-end framework. Below is the SCSS used to generate the basic layout of the homepage using the Semantic Grid Mixins Foundation supplies (http://foundation.zurb.com/...
Craig Ward's user avatar
4 votes
1 answer
345 views

SASS based semantic fluid grid

I am looking for opinions on this code. I have been experimenting with SASS the last few days and have come up with the following code. The idea was to enable the creation of a fluid grid without ...
JeremyC's user avatar
  • 41
4 votes
0 answers
305 views

SaSSified version of Skeleton CSS

Recently I have been developing a SASSified version of Dave Gamache's Skeleton CSS front-end framework. I have publicly posted the code on github as well as a live demo. What I am looking for is ...
djthoms's user avatar
  • 141
3 votes
2 answers
11k views

Tooltip-overlay following the mouse pointer

The purpose is to attach a tooltip-element to arbitrary HTML-elements. The tooltip appears when the user hovers an element. Follows the mouse-pointer while moving over the element. ...
michael.zech's user avatar
  • 4,294
3 votes
3 answers
3k views

Animated SVG pie chart with custom properties

I've made a small js/css/html module which purpose is to fill a pie chart up to a given percentage. Basically it could be used for instance as a filling pie chart that keep tracks of the amount of ...
Antonin Cezard's user avatar
3 votes
1 answer
211 views

SASS Code Structure / Readability

I'm trying out a new approach to SASS stylesheets, which I'm hoping will make them more organizined, maintainable, and readable. I often feel like there is a thin line between code that is well ...
edan's user avatar
  • 233
3 votes
1 answer
130 views

SASS 960 fluid grid

I'm currently converting a CSS 960 fluid grid to SASS. How can I improve my current implementation? My column classes .two.columns are getting a bit unruly. Is ...
thmsmxwll's user avatar
  • 107
3 votes
2 answers
221 views

Prey Throbber using CSS Animation

I'm migrating to web development and wanted to learn CSS animations better. I was playing Prey last night and realized the "throbber" on the elevator screen would be interesting to ...
Carcigenicate's user avatar
3 votes
1 answer
1k views

Simple modals in vanilla JS

Recently I was looking for some really simple modal/popup solution in vanilla JS, but nothing popped. So I wrote mine component. It works great so far, have all the options I need, but I don't know if ...
Tomek Buszewski's user avatar
3 votes
1 answer
82 views

Simple website made for learning purposes

Hello I've just finished coding one of my first websites. And I would love some feedback. I know that I really need to improve my design and improve my code and for that I need some tips from you guys ...
fluffy's user avatar
  • 377
3 votes
1 answer
613 views

More elegant Sass @mixin to create pseudo-element shapes

I picked up Sass last week, and I'm already diving into expressions. I have a @mixin that creates a CSS border triangle using the following call: ...
Phil Tune's user avatar
  • 161
3 votes
1 answer
516 views

Susy basic fixed grid

I'm new to Susy and I'm loving it. I've been learning and trying a simple example - a simple grid that contains two columns at a fixed resolution of 320 pixels. One test would be to have two side by ...
totalnoob's user avatar
  • 223
3 votes
0 answers
64 views

Travel agent website

I've created a travel agent website, I would like to know how can I improve, DRY my code and how to increase performance - I tinified img's but the bottom one I've made in PS takes much time to load. ...
fluffy's user avatar
  • 377
3 votes
1 answer
60 views

Sass styling with React components

I have put together a piece of what can be a much larger frontend in Reactjs. I just put together the component that renders to the user a list of airports and hotels as well as a header component. ...
Daniel's user avatar
  • 165
3 votes
0 answers
316 views

CSS animation of ravens flying in a circle

I just made a little experiment on codepen with this animation. But I get some performance issues: sometimes it's not as smooth as it should be. Does someone know some practice I could use to ...
GordonFreeman's user avatar
3 votes
0 answers
51 views

Polyfill for a legacy system: Attach "labels" to their corresponding checkboxes

I had to do some maintenance programming on a legacy software recently. Most of the system's logic is done with Java and PL SQL. The Java creates some special kind of XML. These XML is then ...
michael.zech's user avatar
  • 4,294
3 votes
0 answers
427 views

Gulp file for Jade, SASS, Optimize-html, jekyll and more

I have the following gulpfile which I use for development. It used to be a simple gulpfile with just jade compiling, sass, jekyll-rebuild, etc. but then I decided to add HTML Optimization my gulpfile ...
Guille's user avatar
  • 131
3 votes
0 answers
40 views

A 'top 100' app that displays list of users ordered in two different ways

I built a small app that gets data from a remote json file and displays it in a list of users. In each list item, an image of the user, their name, and their points tallies are shown. The list is ...
alanbuchanan's user avatar
  • 1,302
2 votes
1 answer
70 views

Checking screen sizes for responsive site

I wrote this piece of code to make any breakpoint to the users choice: ...
Bas's user avatar
  • 699
2 votes
3 answers
225 views

Task-list app, which allows to add and remove tasks from list

I wrote my first web app. Please let me know what I should improve. I want to write as clean code as possible. App is about adding and removing tasks from list. Backend is written in Django, frontend ...
Damian Tułacz's user avatar
2 votes
1 answer
548 views

Simple recipes web app with Redux

I have completed a coding challenge from Free Code Camp. The challenge's user stories are as follows: I can create recipes that have names and ingredients. I can see an index view where the ...
alanbuchanan's user avatar
  • 1,302
2 votes
1 answer
83 views

First website written with SASS/SCSS

I figured this morning that I wanted to learn how to use SASS, so I decided to rewrite an existing project's CSS using SASS. The project itself isn't complete so this is just a rough draft of the ...
Chrillewoodz's user avatar
2 votes
1 answer
47 views

Different color classes that control the same stuff

I have this code... ...
Smokey Dawson's user avatar
2 votes
2 answers
122 views

Quickly fixing unmaintainable SCSS code in Rails

I've been working on a website and Rails and am fairly proud of my HTML semantics. However, my CSS code has become enormous in size, which is largely unnecessary for such a small website. How could I ...
Dillmo's user avatar
  • 131
2 votes
1 answer
126 views

React board game app

I was told to code a board game app using React for a job interview. They told me they chose other candidates to move forward with, so I was wondering on what I could improve. The full code can be ...
Jorayen's user avatar
  • 141
2 votes
1 answer
117 views

Rendering three vertical dots using SCSS

I have a pretty simple question but I can't seem to find a solution for it. I have the following SCSS code (can be found below) which works fine, but I think it could be simplified to get rid of the ...
T. Dirks's user avatar
  • 123
2 votes
1 answer
15k views

React beginner exercise: Build a base arithmetic calculator

Exercise assignment: Build a calculator with React which can add, subtract, multiply and divide. See image below for reference Give it whatever design and colors you want Each text ...
michael.zech's user avatar
  • 4,294